1. 安装

Vue-cli搭建项目时，有一个选项是选择是否安装vue-router的，如果已经安装就不需要安装了，如果未安装需要在项目根目录下通过执行以下命令进行安装：

npm install vue-router --save-dev

2. 基本用法

使用 Vue.js ，把 Vue Router 添加进来，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

2.1 使用路由的方式

（1）路由匹配到的组件进行渲染
具体是由<router-view />标签实现的

    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>

（2）声明式导航
使用router-link 组件来实现：

      <!-- 使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
      <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to Bar</router-link>

（3）编程式的导航
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

2.2 路由定义步骤

（1）定义组件

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

（2） 定义路由

    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar }
    ]

（3） 创建 router 实例

    // 3. 创建 router 实例，然后传 `routes` 配置
    // 还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
      routes // (缩写) 相当于 routes: routes
    })

（4） 创建和挂载根实例，根实例注入路由

    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    const app = new Vue({
      router
    }).$mount('#app')

通过注入路由器，我们可以在任何组件内通过 this.route 访问当前路由：

// Home.vue
export default {
  computed: {
    username() {
      // 我们很快就会看到 `params` 是什么
      return this.$route.params.username
    }
  },
  methods: {
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    }
  }
}

使用 this.$router 的原因是并不想在每个独立需要封装路由的组件中都导入路由。

3.路由参数动态匹配

把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。使用“动态路径参数”(dynamic segment) 来达到这个效果。
（1）一个“路径参数”使用冒号 : 标记
当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

像 /user/foo 和 /user/bar 都将映射到相同的路由。你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：

image.png

（2）组件复用的问题
当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用，但是组件的生命周期钩子不会再被调用。
解决方法：复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象

const User = {
  template: '...',
  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
    }
  }
}

或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫
（3）匹配任意路径
如果想匹配任意路径，我们可以使用通配符 (*)，有通配符的路由应该放在最后。路由 { path: '*' } 通常用于客户端 404 错误。

{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}
//最后放通配符路由
    router.addRoutes([
      mainRoutes,
     //重定向
      { path: '*', redirect: { name: '404' } }
    ])

当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分：

// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

（4）匹配优先级
有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：路由定义得越早，优先级就越高。这个会经常使用到 ，比如根路径

//根路径是登录页
{ path: '/', component: _import('common/Login'), name: 'first', meta: { title: '登录' } }
// 根路径作为嵌套路径，充分的使用嵌套组件而无须设置嵌套的路径
const mainRoutes = {
  path: '/',
  component: _import('Main'),
  name: 'main',
  redirect: { name: 'home' },
  meta: { title: '主入口整体布局' },
  children: [
    { path: '/home', component: _import('common/Home'), name: 'home', meta: { title: '首页' } },
    { path: '/theme', component: _import('common/Theme'), name: 'theme', meta: { title: '主题' } },
  ]
}

（5）其他

• 还可以使用 path-to-regexp 作为路径匹配引擎，所以支持很多高级的匹配模式
• 有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。
• 重定向
  “重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b,从 /a 重定向到 /b：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

重定向的目标也可以是一个命名的路由：

 { path: '*', redirect: { name: '404' } }

4. 子路由（嵌套路由）

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，子路由的写法是在原有的路由配置下加入children字段：

    //配置子路由
    {
      path: '/main',
      name: 'Main',
      component: Main,
      //引子路由
      children: [
        { path: 'first', component: First },
        { path: 'two', component: Two },
      ]
    }

App根组件的<router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view>。在 Main 组件的模板添加一个 <router-view>：

//Main.vue组件
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <router-view />
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: '父页面'
    }
  }
}
</script>

5.动态添加路由

有时菜单是动态配置在数据库中，因此需要动态添加路由，动态路由有以下特点:

• 因为是动态添加的路由，所以页面刷新时动态添加的路由是会被清空的，最好将动态路由进行本地储存,或者重新获取菜单生成路由。
• 虽然是动态路由，但是无论何时以何种方式访问Router的路由，比如你想看看添加完动态路由后的所有路由，其实返回的始终是Router的初始路由，原因是Router的路由并不是响应式的，所以只能读取到初始路由。
• 关于添加的规则，会根据路径查找并进行合并

6. vue-cli 路由配置

vue-cli产生的项目结构，路由配置在src/router/index.js文件，这个文件就是路由的核心文件。

import Vue from 'vue'
import Router from 'vue-router' //引入vue-router
import First from '@/components/First' //引入的First.vue组件
import Two from '@/components/Two'
Vue.use(Router) //Vue全局使用Router
export default new Router({
  //配置路由，这里是个数组
  routes: [
    {
      path: '/',  //链接路径
      name: 'First',  //路由名称
      component: First //对应的组件模板
    },
    // 配置Two组件对象
    {
      path: '/two',
      name: 'Two',
      component: Two
    }
  ]
})

在这里配置两个页面（组件）：First和Two。根组件App根据访问页面url路径来分配页面渲染；