品牌免费网站建设/微信公众号小程序怎么做
记录一个写前端的踩坑问题。
通常我们想要返回上一个页面的时候，缓存上一个页面的数据时，在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 = thisif (!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)},
在开发阶段记得先清掉之前的缓存，不然会会残留之前的定时器未结束