前言：
本章节我们将为大家介绍 Vue.js 路由。
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。
Vue.js 路由需要载入 vue-router 库
中文文档地址：vue-router文档。
一、安装router：
1、直接下载 / CDN
2、CNPM
推荐使用淘宝镜像：
cnpm install vue-router //会默认安装在node_modules文件中 //cnpm install -g vue-router //会安装在全局目录中（类似python的虚拟环境和全局环境）
二、简单路由
- 创建路由规则文件
- 路径：src/router/index.js
- 将router挂载到vue实例
- main.js文件中的注释5.2
- 路由参数类型
- 路径参数 （params只能通过name来引入路由，path会undefined）
- 查询字符串参数 （query可以通过name或path来引入路由）
- 路由跳转
- 使用router-link
- to属性可以为path路径、命名路由以及路径参数和查询字符串参数
- element ui的案例
步骤：
1、将example里的。。。粘贴到src/router/index.js里
路由的创建站们放到单独的文件里components/router/index.js
// track number of popstate listeners import Vue from 'vue' import VueRouter from 'vue-router' // 1. Use plugin. // This installs <router-view> and <router-link>, // and injects $router and $route to all router-enabled child components Vue.use(VueRouter) // 2. Define route components 在src/router/index.js中导入子组件 import greeting from "../components/greeting"; import projectlist from "../components/projectlist"; import projectlistNew from "../components/projectlistNew"; import login from "../components/login"; import loginNew from "../components/loginNew"; import HelloWorld from "@/components/HelloWorld"; // 3. Create the router 在src/router/index.js中创建路由：一个routers数组中的一个对象，就是一条路由 const router = new VueRouter({ mode: 'history', routes: [ { path: '/', component: HelloWorld,name:'hello-world'}, { path: '/projectlist1', component: projectlist,name:'projectlist1' }, { path: '/projectlist2', component: projectlistNew,name:'projectlist2' }, { path: '/login1', component: login,name:'login1' }, { path: '/login2', component: loginNew,name:'login2' }, { path: '/greeting', component: greeting,name:'greeting' } ] }); // 4、导出路由 export default router;
main.js文件：
//导入vue.js import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' //导入App.vue根组件 import App from './App.vue' //5.1、导入vue router对象 import router from './router/index' import loginNew from "@/components/loginNew"; //创建全局组件 Vue.component('login-New',loginNew); //在导入Vue实例之前，要将element-ui插件加入到Vue中 Vue.use(ElementUI); Vue.config.productionTip = false new Vue({ //5.2、把router挂载到Vue实例中去 router, render: h => h(App),//渲染App根组件 }).$mount('#app')
App.vue文件
使用路由前：
<template> <div id="app"> <img alt="Vue logo" src="./assets/jack_li.png"> <HelloWorld msg="欢迎来到 Vue.js App"/> <greeting data_1="这是个app父组件传参给子组件"/> <projectlist></projectlist> <projectlistNew></projectlistNew> <login></login> <login-New></login-New> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' import greeting from './components/greeting.vue' import projectlist from "@/components/projectlist"; import projectlistNew from "@/components/projectlistNew"; import login from "@/components/login"; import loginNew from "@/components/loginNew"; export default { name: 'App', components: { HelloWorld, greeting, projectlist, projectlistNew, login, loginNew } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } img { width: 150px; height: 150px; } </style>
编辑
不足：我们需要手动的修改路径才能跳转到不同页面
使用路由后：
<template> <div id="app"> <img alt="Vue logo" src="./assets/jack_li.png"> <ul> <li> <router-link :to="{name:'hello-world'}">菜单一HelloWorld</router-link> </li> <li> <router-link :to="{name:'projectlist1'}">菜单二projectlist</router-link> </li> <li> <router-link :to="{name:'projectlist2'}">菜单三projectlistNew</router-link> </li> <li> <router-link :to="{name:'login1'}">菜单四login</router-link> </li> <li> <router-link :to="{name:'login2'}">菜单五loginNew</router-link> </li> <li> <router-link :to="{name:'greeting',params:{username:'高老庄'}}">菜单六greeting</router-link> </li> <li> <router-link :to="{name:'xibo_test_index'}">菜单七xibo_index</router-link> </li> </ul> <!-- 展示路由的页面内容--> <router-view></router-view> </div> </template> <script> export default { name: 'App', } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } img { width: 150px; height: 150px; } </style>
编辑
- 在App.vue的<template>标签内中<router-view></router-view>展示路由的页面内容
- 不足：必须要手动改变路由才能跳转到不同页面
- 优化：在父组件的标签内使用<router-link to="路由路径"></router-link>可以达到点击标签就可以跳转页面
- to属性默认为path路径值，
- 不足：如果一个地方改变，就要修改2个地方路径
- 优化：可以在path中添加name属性,然后在父组件中:to="{name:name_value"}
三、嵌套路由
在index.js文件中,
{ path: '/login1', component: login, name: 'login1', children: [ // an empty path will be treated as the default, e.g. // components rendered at /parent: Root -> Parent -> Default // {path: '', component: login, name: 'login1'}, //如果加/，则会从根路由开始匹配，http://localhost:8081/login2 {path: '/login2', component: loginNew, name: 'login2'}, //如果不加/，则会自动拼接到父路由后面，http://localhost:8081/login1/login2 {path: 'login2', component: loginNew, name: 'login2'},
四、查询字符串参数/路径参数
4.1、在子组件中可以通过this.$route.query.username来获取查询字符串参数；
methods:{ //方法一： // changeusername:function (){ // this.username="dalao" // }, //方法二：推荐使用 changeusername(){ this.username="一个没有整容需求的人" } }, created() { console.log("实例创建之后，能够获取到this"); console.log("username为：",this.username); this.username=this.$route.query.name; this.age=this.$route.query.age;
编辑
4.2、路径参数：在url上（在ptah中路径+":参数")
查询路径参数,this.$route.params.username
路由文件index.js const router = new VueRouter({ mode: 'history', routes: [ { path: '/', component: HelloWorld,name:'hello-world'}, { path: '/projectlist1', component: projectlist,name:'projectlist1' }, { path: '/projectlist2', component: projectlistNew,name:'projectlist2' }, { path: '/login1', component: login,name:'login1' }, { path: '/login2', component: loginNew,name:'login2' }, //路径参数：在url上（在ptah中路径+":参数") { path: '/greeting/:username', component: greeting,name:'greeting' } ]
子组件 greeting.vue created() { console.log("实例创建之后，能够获取到this"); console.log("username为：",this.username); this.username=this.$route.query.name; this.age=this.$route.query.age; this.username=this.$route.params.username; // this.age=this.$route.params.age; },
4.2.1、还有一种方法获取路径参数 就是：
在template里参数写成{{this.$route.params.username}}
<p>username为：{{this.$route.params.username}}</p>
然后在created（）就不用写this.username=this.$route.params.username
created() { //获取路径参数 // this.username=this.$route.params.username; }
jquery传参和params传参的区别
1、用法上：
上文已经提到query可以用name或path来引入
params必需要用name来引入，接收参数都是类似的，分别是：
this.$route.query.name和
2、地址栏表现形式上：
query：
/login?id=10&name=zs
params：
/login/12/ls
注意：
这里的12和ls对应的是/:id/:name；
这两个参数可以不写，那么就不会再地址栏上显示；
不过刷新页面，参数会消失；
写上参数刷新页面，参数不会消失。
query方式传参和接收参数
传参:
this.$router.push({ path:'/detail/:id', query:{ id:id } })
接收参数:
this.$route.query.id
params方式传参和接收参数
传参:
this.$router.push({ name:'Detail', params:{ id:id } })
接收参数：
this.$route.params.id
Tips:
params传参，push里面只能是 name:‘xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！
切换路由
// query通过path切换路由 <router-link :to="{path: 'Detail', query: { id: 1 }}">前往Detail页面</router-link> // params通过name切换路由 <router-link :to="{name: 'Detail', params: { id: 1 }}">前往Detail页面</router-link>
简单说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，浏览器刷新页面不会消失，而params相当于post请求，参数不会在地址栏中显示，浏览器刷新页面后消失。
