vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。

我们可以访问其官方网站对其进行学习: Vue Router

一.vue-router 安装与使用

1.安装vue-router

npm install vue-router --save

2.在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)

第一步：导入路由对象，并且调用 Vue.use(VueRouter)

第二步：创建路由实例，并且传入路由映射配置

第三步：在Vue实例中挂载创建的路由实例

3.vue-router的使用

第一步: 创建路由组件

第二步: 创建路由实例，配置路由映射: 组件和路径映射关系，把路由实例挂载到vue实例，

第三步: 使用路由: 通过<router-link>和<router-view>

最终的效果：

二.默认路由

默认情况下, 进入网站的首页, 我们希望<router-view>渲染首页的内容

但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以

如何可以让路径默认跳到到首页, 并且<router-view>渲染首页组件呢?

配置解析:

path配置的是根路径: /
redirect是重定向, 将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了

三.路由嵌套

实现嵌套路由有两个步骤 :

创建对应的子组件, 并且在路由映射中配置对应的子路由.
在组件内部使用<router-view>标签.

定义两个组件：

嵌套路由也可以配置默认的路径：

四.导航守卫

vue-router提供的导航守卫主要用来监听路由的进入和离开的.

vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发.

导航钩子的三个参数解析:

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

当路由发生改变时，会调用beforeEach()方法，

如果是后置钩子, 也就是afterEach, 不需要主动调用next()函数.

五.keep-alive

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

当每次进入一个页面的，页面都会被重新渲染，离开时页面时，页面都会被销毁，若一个页面内存在嵌套路由，则再次进入这个页面时，这个页面会重新渲染，不会保存上一次的路径。

router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存

即再次进入这个页面的时候不会重新渲染，不会调用create()...钩子函数，离开时，不会销毁，不会调用destory()...钩子函数

当组件是keep-alive状态时，可以使用以下函数：

activated()：进入该组件时调用

deactivated()：离开该组件时调用

keep-alive有两个非常重要的属性:

include - 字符串或正则表达，只有匹配的组件会被缓存
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

<keep-alive exclude='home,page'>
   <router-view></router-view>
</keep-alive>

nama为home和page的页面状态不为keep-alive，进入和离开时会重新渲染和销毁

VUE中vue-router的安装与使用