一、vue-router基本使用

1.1 安装vue-router

	npm install vue-touter --save

1.2 配置路由信息

	在./src目录下新建router文件夹,然后再改文件夹底下新建index.js文件,
	然后在main.js导入./router/index

1.3 使用vue-router

1.3.1 创建路由组件

创建两个不同的组件

1.3.2 配置路由映射:路由和组件之间的映射关系

路由的重定向

1.3.3 使用路由:通过<router-link / >,<router-view / >

1.3.4 动态路由

在路由配置信息中加上需要的动态路由

1.3.5 路由懒加载

官网:当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

可以在路由配置里直接写

也可以在外部定义

二、vue-router嵌套路由

首先新建两个组件

如果我想在one路由嵌套子路由,那么在./router/index.js写上

既然我是在one路由嵌套子路由的,那么就需要在One组件里写上

同时也可以给嵌套路由重定向

三、vue-router参数传递

3.2 params方式传递参数

在前文中使用的动态路由时,就是使用params的方式来传递参数;
① 在路由配置文件中

②

③ 取值
注意,在获取参数值的时候是this.$route.params

3.2 query方式传递参数

①在<router-link / >动态绑定query

②取值

3.3 使用编程式方法传递参数

①

②

③取值

四、vue-router导航守卫

4.1 全局前置守卫

语法:router.beforeEach((to,from,next) => {});
当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

全局前置守卫接收三个参数:

• to:将要进入的目标路由对象
• from:从当前正要离开的路由
• next:一定要调用该方法resolve 这个钩子
• 

4.2 全局后置守卫

语法:router.afterEach((to,from) => {})
和全局前置守卫区别的是,后置守卫不会接收next();

4.3 路由独享守卫

语法:在路由配置信息里,beforEnter: (to,from,next) => {}
在进入某一个路由里面才会触发,
该守卫的参数和全局前置守卫参数时一致的

4.4 组件内守卫

在进入某个路由组件内时

注意:beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。

不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

在另外两个守卫里,由于this已经可用了,所以 不支持 传递回调了,也没有必要了

五、keep-alive

5.1 keep-alive的使用

keep-alive是Vue内置的一个组件,可以使被包含的组件保留状态,或者避免重新渲染;
在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的状态，这个时候就需要保存状态，要缓存状态；vue里提供了keep-alive组件用来缓存状态。
①,将<router-view / >用<keep-alive / >包裹;

②当期们需要从 one路由进入其他路由时,再返回时希望保留one路由的信息

5.2 keep-alive的属性

5.2.1 include

字符串或者正则表达式，表示只有匹配的组件会被缓存

默认表示所有组件都会被缓存

5.2.2 exclude

字符串或者正则表达式，表示匹配的组件都不会被缓存

这里的One，Two,就是对应组件的name

六、<router-link / >补充

<router-link / >是vue本身已经全局注册的组件,组件除了to属性,还有其他一些属性

6.1 to属性

表示目标路由,这里可以写入一个字符串,也可以动态绑定

6.2 tag属性

tag属性默认值 是<a />,当是默认值时,可以省略不写;
如果我们不希望<router-link / >渲染成<a />标签时,可以使用tag属性来指定想要渲染的效果

6.3 replace属性

replace属性默认值是false;
设置 replace 属性时，会调用 router.replace(),也就是在浏览器的返回按钮禁用,replace不会留下history记录

6.4 active-class属性

active-class属性默值是router-link-active
当<router-link / >匹配路由成功时,会自动给当前元素设置一个router-link-active的class;

如果想要修改这个类名(觉得太长了),那么可以


如果有许多地方要修改的话,写起来很麻烦且重复

那么此时可以在路由文件./route/index.js写上

6.5 不使用<router-link / >来实现路由切换