导航路由
有时候通过一个名称来表示路由会显得方便一些，特别是在链接路由或者执行跳转的时候，我们可以在创建 Router 实例的时候。在其中配置给某个路由设置名称。
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
如果我们想链接到一个命名路由，可以给router-link的to属性传递一个对象
User
以上这段代码和调用 route.push()是一回事
router.push({ name: 'user', params: { userId: 123 }})
这两种方式都会把路由导航到 /user/123 路径。
命名视图
有时候想同时展示多个同级的视图，而不是嵌套展示。
假如我们现在有个 sidebar（侧边栏）和main（主视图）两部分，这时候命名视图就派上用场了。我们可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口，如果 router-view 没有设置名字，那么默认为 default。也就是单独出口。
一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：
{
path:'/',
name:'home',
components:{
default:Foo,
a:Bar,
b:Baz
}
}
这样的话，3个组件都可以同级显示，foo对应default，bar对应a，baz对应b
重定向
重定向也是通过 routes 配置来完成的，下面例子是从 a 重定向到 b
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
但是这里需要注意，/b一定要一定在路由中定义设置好component了，否则是不会生效找不到路径的。
重定向的目标也可以是一个命名的路由：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
甚至我们还可以使用一个方法动态返回重定向目标。
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
})
别名
“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么“别名”又是什么呢？
/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。也就是说，别名是只修改了名字，真是路径没有发生改变。
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
这里需要指定好 /a 的路径和对应组件，然后再指定他的别名就行了。
“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。
路由组件传参
在组件中使用$route会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
使用 props将组件和路由解耦：
这是原来的用法
const User = {
template: 'User {{ $route.params.id }}'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
通过props解耦
const User = {
props: ['id'],
template: 'User {{ id }}'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },
// 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
这样你便可以在任何地方使用该组件，使得该组件更易于重用和测试。
布尔模式
如果 props 被设置为 true，route.params将会被设置为组件属性。
对象模式
如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。
const router = new VueRouter({
routes: [
{ path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
]
})
函数模式
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。
const router = new VueRouter({
routes: [
{ path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
]
})
URL /search?q=vue 会将 {query: 'vue'} 作为属性传递给 SearchUser 组件。
请尽可能保持 props 函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义 props，请使用包装组件，这样 Vue 才可以对状态变化做出反应。