1. 介绍
Vue Router 是 Vue.js 官方的路由管理器。它由Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。其包含的功能有：
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于Vue.js过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为
2. 基础
1. 起步
使用Vue-cil搭建出来的初始的例子：
import Vue from 'vue' //引入vue
import VueRouter from 'vue-router' //引入vue-router
import Home from '../views/Home.vue'
import stateView from '../views/state.vue' //引入的组件
import getView from '../views/getter.vue' //引入的组件
import actionView from '../views/action.vue' //引入的组件
Vue.use(VueRouter) //vue全局使用router
const routes = [ //对路由进行配置
{
path: '/', //path为链接路径
name: 'Home', //路由的名称，name属性可以不写
component: Home //对应的组件模板
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/state',
component: stateView
},
{
path: '/getter',
component: getView
},
{
path: '/action',
component: actionView
}
]
const router = new VueRouter({
mode: 'history', //路由模式
base: process.env.BASE_URL,
routes
})
export default router
使用路由的步骤：
- 引入路由import VueRouter from ‘vue-router’
- 全局使用路由：Vue.use(VueRouter)
- 对路由进行配置： const routes = [{}] 里面为每一个路由的配置项
- 创建路由实例：new VueRouter({})
2. 动态路由匹配
需求：把某种模式匹配到的所有路由，全部映射到同个组件。例如：根据id来对组件进行渲染，在vue路由中使用“动态路径参数”来达到这个效果。
例子：
const User = {
template: '<div>User</div>'
}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{
path: '/user/:id', component: User }
]
})
一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。
3. 嵌套路由
一个界面由多层嵌套的组件组合而成，同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件。
要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
4. 编程式的导航
除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
router.push(location, onComplete?, onAbort?)
这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
// 字符串
router.push('home')
// 对象
router.push({
path: 'home' })
// 命名的路由
router.push({
name: 'user', params: {
userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({
path: 'register', query: {
plan: 'private' }})
如果提供了 path，params 会被忽略。
// 这里的 params 不生效
router.push({
path: '/user', params: {
userId }}) // -> /user
router.go(n)：n为整数，意思为在 history 记录中向前或者后退多少步。
实例：
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)
5. 命名路由
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user', //name为命名路由
component: User
}
]
})
6. 命名视图
需要同级展示多个视图，不是嵌套展示。你可以在界面中拥有多个单独命名的视图，不只有一个出口
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
如果没有设置name，默认为default。
一个视图使用一个组件渲染，所以当页面中有多个视图的时候，就需要有多个组件来进行渲染。
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
7. 重定向和别名
通过routes配置来完成。
const router = new VueRouter({
routes: [
{
path: '/a', redirect: '/b' }
]
})
重定向的目标也可以是一个命名的路由：
const router = new VueRouter({
routes: [
{
path: '/a', redirect: {
name: 'foo' }}
]
})
重定向的目标还可以是一个方法，动态返回重定向目标：
const router = new VueRouter({
routes: [
{
path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
})
别名：别名意思为一个路由路径的另一个名字，就跟人的小名一样，当访问的路径为别名时，实际上路由匹配的为本身的路由。
“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL，而不是受限于配置的嵌套路由结构。