1.安装
直接引入
<script src="vue.js"></script>
<script src="vue-router.js"></script>
npm下载
npm install vue-router
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
2.使用
在router下的js文件中
export default new Router({
routes: [
path: '/',
component: View
]
})
饿了么中路由实例
3.嵌套路由
实际生活中的应用界面，通常由多层嵌套的组件组合而成。嵌套路由即是在原路由中加一个children属性，children可以是一个数组，存放这个父路由的所有子路由；也可以是一个路由文件，文件中存放的路由都该路由的子路由
上图中HomePage为父路由组件，children中的路由为该路由的子路由，子路由中的组件会展示在父组件中（父组件中需要用<router-view></router-view>来渲染子路由中的组件）
使用<router-link></router-link>来切换路由
4.动态匹配路由
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：
{
path:"/seller:id",//通过不同的id来使不同的商家都使用同一个组件，id可传可不传
component: Seller,
}
5.命名路由
有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称
{
path:"/seller:id",//通过不同的id来使不同的商家都使用同一个组件，id可传可不传
name: seller,
component: Seller,
}
要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象，对象中可传递参数：
<router-link :to="{ name: 'seller', params: { id: 123 }}">User</router-link>
6.命名视图
有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。
<router-view></router-view>
<router-view></router-view>
每个路由都被渲染了两次
<router-view name='sidebar'></router-view>
<router-view name='main'></router-view>
一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)：
routes: [
{
path: '/',
components: {
default: Main,
sidebar: Sidebar,
main: Main
}
}
]
7.重定向和别名
重定向
重定向(Redirect)就是通过各种方法将各种网络请求重新定个方向转到其它位置,用于网站调整或网页被移到一个新地址,它也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：
routes: [
{
path: '/a',
redirect: '/b'
}
]
别名
/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。简单的说就是给 /a 起了一个外号叫做 /b ,但是本质上还是 /a
上面对应的路由配置为：
routes: [
{
path: '/a',
component: A,
alias: '/b'
}
]
『别名』的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。
8.编程式导航
除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现
router.push('/');//字符串
router.push({path: '/'});//对象
router.push({
name: 'homePage',
params: {
id: '123'
}
})//命名路由
#router.replace()与router.push()类似，但router.push()会像history栈添加记录，可以通过router.go(n)来向前和向后多少步来切换路由，router.replace()不会
9.路由组件传参
布尔模式
如果 props 被设置为 true，route.params 将会被设置为组件属性
routes: [
{
path: '/user/:id',
component: User,
props: true
}
]
对象模式
如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用
routes: [
{
path: '/promotion/from-newsletter',
component: Promotion,
props: {
newsletterPopup: false
}
}
]
函数模式
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等
routes: [
{
path: '/search',
component: SearchUser,
props: (route) => ({
query: route.query.q
})
}
]
#<router-link></router-link>也可以传递参数，子组件使用props接收
<router-link :seller='seller'></router-link>