- <router-link>的replace属性
- 作用:控制路由跳转时操作浏览器历史记录的模式
- 浏览器的历史记录有两种写入方式:分别为push和replace,push是追加历史记录,replace是替换当前记录。路由跳转时候默认为push
- 如何开启replace模式:
<router-link replace .......>News</router-link>
- 编程式路由导航
- 作用:不借助<router-link> 实现路由跳转,让路由跳转更加灵活
- 具体实现
//$router的两个API
this.$router.push({
name:'xiangqing',
params:{
id:xxx,
title:xxx
}
})
this.$router.replace({
name:'xiangqing',
params:{
id:xxx,
title:xxx
}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退,正数前进,负数后退。
- 缓存路由组件
- 作用:让不展示的路由组件保持挂载,不被销毁。
- 具体编码
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
其中News指的是组件名,一般会使用在用户输入一些东西之后,切换回来,需要保持用户的输入。写include说明要缓存的组件,不写,则表示组件都会被缓存。如果有两个以上则写成数组的形式。
- 两个新的生命周期钩子
- 路由组件所独有的两个钩子,用于捕获路由组件的激活状态。
- 具体的名字:
activated路由组件被激活时触发。没有被<keep-alive>包裹的话,activated是不起作用的。在mounted之后执行。所以当我们运用了组件缓存时,如果想每次切换都发送一次请求的话,需要把请求函数写在activated中,而写在created或mounted中其只会在首次加载该组件的时候起作用。
deactivated路由组件失活时触发。
网友评论