修改App.vue文件，在router-link标签中使用name来绑定路由名
<template> <div> <div> <router-link v-bind:to="{ name:'home'}">Home</router-link> | <router-link :to="{ name:'about'}">About</router-link> </div> <router-view/> </div> </template> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } #nav { padding: 30px; } #nav a { font-weight: bold; color: #2c3e50; } #nav a.router-link-exact-active { color: #42b983; } </style>v-bind:to 方法可以简写成： :to
使用浏览器访问URL：:8080/#/,在页面上点击Home和About标签，可以正常的渲染
2.4 命名视图如果想在同一个页面上显示多个视图，并分别对不同的视图进行布局时，可以在div标签中定义多个router-view标签，并为每个router-view标签定义名字，这就是命名视图
修改src/App.vue文件，添加两个命名视图view1和view2
<template> <div> <div> <router-link v-bind:to="{ name:'home'}">Home</router-link> | <router-link :to="{ name:'about'}">About</router-link> </div> <router-view/> <router-view/> // 添加router-view标签，并把名字定义为view1 <router-view/> // 添加router-view标签，并把名字定义为view2 </div> </template> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } #nav { padding: 30px; } #nav a { font-weight: bold; color: #2c3e50; } #nav a.router-link-exact-active { color: #42b983; } </style>然后修改src/router/router.js文件，在新添加的路由中添加两个命名视图
import Home from '@/views/Home.vue' export default [ { path: 'http://www.likecs.com/', name: 'home', component: Home, }, { path: '/about', name: 'about', component: () => import('@/views/About.vue'), },{ path:'/argu/:name', component:() => import('@/views/argu.vue') },{ path:'/parent', component:() => import('@/views/parent.vue'), children:[ { path:'child', component:() => import('@/views/child.vue') } ] },{ path:'/named_view', // 命名视图 components:{ // default会默认加载App.vue中没有命名的视图 default: () => import('@/views/child.vue'), view1: () => import('@/views/view1.vue'), view2: () => import('@/views/view2.vue'), } } ]然后在src/views目录下添加view1.vue和view2.vue文件
view1.vue文件内容为
<template> <div> I am view1 </div> </template>view2.vue文件内容为
<template> <div> I am view2 </div> </template>在浏览器中打开URL；:8080/#/named_view
在浏览器中安装 Vue Devtool插件，可以看到页面上渲染了3个router-view组件
重定向路由的作用是把当前要访问的URL重定向到另一个URL
修改src/router/router.js文件，添加重定向路由
import Home from '@/views/Home.vue' export default [ { path: 'http://www.likecs.com/', name: 'home', component: Home, }, { path: '/about', name: 'about', // route level code-splitting component: () => import('@/views/About.vue'), },{ path:'/argu/:name', component:() => import('@/views/argu.vue') },{ path:'/parent', component:() => import('@/views/parent.vue'), children:[ { path:'child', component:() => import('@/views/child.vue') } ] },{ path:'/about_path', // 重定向路由 redirect:'about' } ]当使用浏览器访问URL::8080/#/about_path时，就会跳转到路由名为 about的路由上去，即访问了/about路由
在重定向路由中，也可以使用命名路由的方式
即把/about_path修改成使用命名路由的重定向方式
{ path: '/about_path', redirect: { name:'about' } }在重定向的redirect中，也可以传入一个函数
修改about_path路由
{ path: '/about_path', redirect: to => { console.log(to) // 打印出传入的to函数 } }浏览器打开URL：:8080/#/about_path，在调试样中查看打印出的结果
修改about_path路由，在redirect中定义函数体
{ path: '/about_path', redirect: to => { return{ name:'home' } } }刷新浏览器，页面就跳转到home页面了
redirect中定义的to函数也可以返回一个路由路径
{ path: '/about_path', redirect: to => { return '/named_view' } }此时打开URL：:8080/#/about_path，页面就会跳转到/named_view页面中
上面redirect中的函数体可以简写成
{ path: '/about_path', redirect: to => '/named_view' } 2.6 路由别名路由别名，顾名思义就是为一个路由设置一个别名，设置别名以后即可以通过路由的path的值进行访问，也可以通过别名访问这个路由