vue-router在项目中用于设定访问路径，将路径和组件映射起来，在单页面应用中，页面路径的改变就是组件的切换。

1 安装和使用vue-router

安装vue-router

在创建vue-cli的时候选择router
使用npm命令 npm install vue-router --save

使用vue-router

第一步：导入路由对象并调用

import Vue from "vue";//
import VueRouter from "vue-router";
Vue.use(VueRouter);

第二步：创建路由实例，并在Vue 实例（main.js）中挂载路由实例

第三步：创建路由组件、配制映射关系

const Home = () => import("../views/home/Home");
const Cart = () => import("../views/cart/Cart");

Vue.use(VueRouter);

const routes = [
{
    path: "/home",
    component: Home
  },
  {
    path: "/cart",
    component: Cart
  }];
const router = new VueRouter({
  routes,
  mode: "history"
});

export default router;

第四步：使用路由，通过 <router-view></router-view>或<router-link></router-link>

<router-view>：该标签会根据当前的路径，动态渲染出不同的组件
<router-link>：该标签是vue-router中内置的组件，会被渲染成一个<a>标签。

在App.vue中使用

2 使用vue-router的小细节

2.1 默认路径跳转到首页

可以在routes中多配置一个path，将新path直接重新定向到/home路径下。

const routes = [
  {
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  }]

2.2 改变路径模式

通过mode将默认路径hash模式改变为history

const router = new VueRouter({
  routes,
  mode: "history"
})

2.3 router-link

to:指向路径
tga：可以将默认的a标签形式改成其它标签
replace:不会留下history记录，使用后后退键返回不能回到上一个页面中
active-class：匹配的路由成功时，会给选中的当前router-link设置一个router-link-active的class，通常可以通过该类名做一些css操作之类 <router-link to="/home" tag="button" replace active-class="active">首页</router-link>

2.4 动态路由

动态路由不同于常见的静态路由，可以根据不同的「因素」而改变站点路由列表。比如我们进入用户界面时，希望是user/jack或user/kobe等。

路径参数通过":"标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

export default {
  name: "App",
  data() {
    return {
      id: "zhangsan"
    };
  }
};

结合V-bind使用

<router-link :to="'/user/'+id">用户</router-link>

可以动态获取id

3 懒加载

3.1 懒加载的作用

路由通常会定义很多不同的页面，这个页面一般放在一个js文件中。当页面内容过大时，我们从服务器请求这个页面，可能需要花费一定的时间，用户体验不佳。

3.2 懒加载的用法

结合vue的异步组件和webpack的代码分析

const Home = resolve => {
    require.ensure(['../components/Home.vue'], () => {
        resolve(require('../components/Home.vue'));
    });
};

AMD写法

const About = resolve => require(['../components/About.vue'], resolve);

ES6 写法

const Home = () => import('../components/Home.vue');

4 路由嵌套

嵌套路由比较常见，比如在首页中通过/home/news或/home/message访问，一个路径映射一个组件，访问这两个路径也会分别渲染这两个组件。

实现路由嵌套

创建对应的子组件
在路由映射中配置对应的子路由

{
    path: "/home",
    component: Home,
    children: [
      {
        path: '',
        redirect: 'news'
      },
      {
        path: "news",
        component: HomeNews
      },
      {
        path: "message",
        component: HomeMessage
      }
    ]
  },

在组件内部使用<router-view>

5 传递参数

在跳转路由的时候传递一些参数

5.1 参数类型：

传递的参数主要有两种：

params类型配置路由格式：/router/:id 传递的方式：在path后面跟上对应的值传递后的路径：/router/abc
query类型

配置路由格式：/router 传递的方式：在对象中使用query的key作为传递方式传递后的路径：/router?id=abc

5.2 传递方式

router-link

<router-link :to="{path: '/profile', query: {name: 'why', age: 18, height: 1.88}}">

JS代码 App.vue中写入

methods:{
  toPro(){
    this.$router.push({
      path:'/profile/'+abc,
      query:{name:'kobe',age:18}
    })
  }
}

5.3 `$router`和`$route`

$router是vue-router实例，导航到不同的url可以通过$router.push
$route是当前router跳转对象，可以通过 $route.path或$ route.params等获取数据

6 导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。并且参数或查询的改变并不会触发进入/离开的导航守卫。

6.1 如全局前置导航使用

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})

to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由
next: Function: 调用该方法后，才能进入下一个钩子

6.2 举例

可以通过全局导航守卫监听路由跳转，并更改每个url的title。比如给每个路由配置中添加title，然后通过全局导航守卫在每个路由跳转的时候，将该url的title更换。具体实现如下：添加title属性

{
    path: "/user/:id",
    component: User,
    meta: {
      title: "用户"
    }
  },
  {
    path: "/profile",
    component: Profile,
    meta: {
      title: "档案"
    }
  }

通过全局前置导航实现

router.beforeEach((to, from, next) => {
  // 从from跳转到to
  document.title = to.matched[0].meta.title;

  next();
});

6.3其他守卫

全局守卫：

//1 全局前置
router.beforeEach((to, from, next) => {
  // ...
})

//2 全局后置
router.afterEach((to, from) => {
  // ...
})
//3 路由独享守卫
routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
  //4 组件内守卫 
  beforeRouteEnter(to, from, next) {
  },
  beforeRouteUpdate(to, from, next) {
  },
  beforeRouteLeave(to, from, next) {
  }
 具体可查阅vue-router官网

7 keep-alive

keep-alive是Vue内置组件，可以使被包含的组件保留状态，或避免被重新渲染。 router-view也是一个组件，如果被包裹在keep-alive里面，所用路径匹配到的视图组件都会被缓存。

vue-router