<template> <div> <el-tag type="info" :disable-transitions="false" :closable="item.id != 0" effect="plain" v-for="(item,index) in getToolData" :key="index" :class="{active:$route.path == item.detail}" @click="redirect(item)" @close="closeToolItem(item)" > <span v-if="$route.path == item.detail"></span> {{item.name}} </el-tag> </div> </template> <script> import { mapGetters } from "vuex"; export default { methods: { closeToolItem(item, index) { this.$store.dispatch("clearToolBar", item); this.$store.dispatch("clearCache", item.componentName); }, redirect(item) { this.$router.push({ path: item.detail }); } }, computed: { ...mapGetters(["getToolData", "getCacheView"]) } }; </script>
生命周期 activated 和 deactivated
采用了 keep-alive 缓存的路由组件，重新进入该路由，路由组件不会重新创建，所以也就不会触发组件的生命周期函数（比如说 beforeCreate 、 mounted 等）。所以在对该页面进行数据更新或者清除数据。 vue 为我们提供了 activated 和 deactivated 生命周期函数，当重新进入路由组件会触发 activated 函数，离开则会触发 deactivated 。
<template> <div> A page</div> </template> <script> export default { data(){ return { form :{ name:'', password:'' } } }, activated(){ this.getList() }, deactivated(){ Object.keys(this.form).map(key => { this.form[key] = '' }) } } </script>
总结
以上所述是小编给大家介绍的vuex + keep-alive实现tab标签页面缓存问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: