编程式路由导航+缓存路由组件
Posted 勇敢*牛牛
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了编程式路由导航+缓存路由组件相关的知识,希望对你有一定的参考价值。
编程式路由导航
-
作用:不借助
<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>
多个组件不被销毁:
<keep-alive include="['News','Message']">
<router-view></router-view>
</keep-alive>
11.两个新的生命周期钩子(路由组件独有)
activated,deactivated
这两个生命周期函数一定是要在使用了keep-alive
组件后才会有的,否则则不存在。
使用方法是在路由出口外套上
<keep-alive>
<router-view></router-view>
</keep-alive>
生命周期钩子(路由组件独有)
activated()
// 激活
console.log('New组件被激活了');
,
deactivated()
// 失活
console.log('New组件失活了');
<template>
<ul>
<li :style="opacity">欢迎学习</li>
<li>news001<input /></li>
<li>news002<input /></li>
<li>news003<input /></li>
</ul>
</template>
<script>
export default
name:'News',
data()
return
opacity:1
,
activated()
// 激活
console.log('New组件被激活了');
this.timer = setInterval(() =>
console.log('aaaaa');
this.opacity -= 0.01;
if(this.opacity <= 0)
this.opacity = 1;
,16)
,
deactivated()
// 失活
console.log('New组件失活了');
clearInterval(this.timer)
</script>
<style>
</style>
以上是关于编程式路由导航+缓存路由组件的主要内容,如果未能解决你的问题,请参考以下文章