一、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 / >
来实现路由切换