记录一个写前端的踩坑问题。
通常我们想要返回上一个页面的时候,缓存上一个页面的数据时,在vue中就提供了个好用的功能,把想要的缓存的地方加上keep-alive
如下:一般来说会缓存 表单的数据。
<keep-alive>
<Form ref="forms" :model="formItem" :label-width="100">
......
</Form>
</keep-alive>
单单这个是不太满足我们的功能的。因为这样的话,不管我们从哪个页面进入这里,数据都会被缓存。要求是在详情页或者某几个页面回来的时候缓存,这时候就要增加点东西了。
此处介绍个vue的全局前置守卫beforeRouteEnter
官方讲解: beforeRouteEnter官方讲解
在router的index.vue 中添加个路由参数
devRouter = [{
path: '/',
name: 'home',
component: Home,
meta: {
keepAlive: true,
isBack: false
}
}
]
在home.vue中添加下面两个钩子
beforeRouteEnter(to, from, next) {
if (from.path == '/detail') {
to.meta.isBack = true;
} else {
to.meta.isBack = false;
}
next();
},
activated() {
let _this = this
if (!this.$route.meta.isBack) {
this.formItem = {
}
...
}
this.$route.meta.isBack = false;
}
当进入该页面的时候会先到beforeRouteEnter()函数里,判断是从哪个页面来的进行设置路由里的参数, 然后执行activated()钩子。如果不是从详情页来的话,就需要手动去重置页面缓存的参数为空。 这样就可以解决了。
第二个文件 使用定时器这个简单。大都使用是这样
在mounted里挂载个启动函数,然后使用下退出时的钩子 如:
//定时器加载
Initdate() {
this.timer = setInterval(func, 300 * 1000)
}
destroyed() {
clearTimeout(this.timer)
}
正常使用没啥,此处但是里面要是使用了keep-alive就有个大坑了。除了初始化进入home页面时会执行mounted()里面的方法,从其他页面跳进来的时候,不再执行了。也就是说在mounted里挂载的方法不执行了。
同样,destroyed()钩子也是一样不再执行了。
这里就需要用到deactivated()和activated()钩子了。
常规思维如下:
activated() {
if (!this.$route.meta.isBack) {
.......
}
this.$route.meta.isBack = false;
this.Initdate()//定时器函数
},
deactivated() {
clearTimeout(this.timer)
},
在开发阶段记得先清掉之前的缓存,不然会会残留之前的定时器未结束