嗯，就是这鬼东西。
image.png
没有用 elementui，但还是看了一下 vue-element-admin 的源码，毕竟坚实可靠的方案是我们的首选方案。
可惜它需要页面都要有 name（因为用到了 keep-alive 的 includes 属性），我们的项目已经开发到了一半，何况 Name 这东西对于开发者体验来说并不是好事，以前用 iframe 的时候可没有这么些七里八里的要求。
然后作为一个模板工程，建议还是不要用 vuex，因为这限定了使用你模板的工程必须使用 vuex。
所以，我们的命题是：没有 name 没有 vuex 的情况如何实现任务栏。
vuex 好说，不能存储在状态库里，用 sessionStorage 就好，问题是没有 name。
尝试 v-if="route.meta.keepAlive=false 的时候其实已经缓存了，它不会根据你的设置修改缓存，我们要做的是：关闭 tab 的时候，真正把缓存清除掉。
翻遍了度娘，终于找到了这一篇，给了我极大的灵感：
https://www.jianshu.com/p/a603fdd0bf84
keep-alive 既然是一个 vue 组件，那它的信息势必是存储在组件内部的，所以我们只需要：
- 缓存所有 tab 中需要显示的页面。
- 打开页面的时候记录 tab 数据。
- 关闭页面的时候，将对应页面从缓存中移除。
第一步简单：
<keep-alive>
<router-view />
</keep-alive>
第二步简单：
tasks.push({
label: title,
value: path
})
难点是第三步：
问题1. keep-alive 没有 api 去删除缓存
问题2. 即使有这个 api，我们还要告诉这个 api 删除谁
根据大神的文章，直接使用，并没什么用，但是这不妨碍我们借鉴大神的思路。
- 找到 keep-alive 这个组件（假设它叫 keeper）
- 将当前组件 key 从：keeper.$vnode.parent.componentInstance.cache 中移除
- 将当前组件 key 从：keeper.$vnode.parent.componentInstance.keys 中移除
接下来我们要做的是：
- 找到 keep-alive 组件实例
- 找到 key
keep-alive 的组件好找，在它的父组件中就能很快找到，它就是：
this.$children[0]
可能每个项目不一样吧，反正在父组件里面仔细找找总会有的，它的 $vnode 有个 tag 上面写着 keep-alive，很好找的。
image.png
key 比较麻烦，也不知道是怎么生成的，总之按照大神文章里的这样取是不对的：
vueInstance.$vnode.componentOptions.Ctor.cid
想了半天终于意识到：我反正每个页面都 keep-alive 了，所以每次打开不就都会改变 keys 吗？最近加的那个，我记录下来，不就是当前页面的 key 吗？
easy，每次打开页面的时候取：
keeper.$vnode.parent.componentInstance.keys[keeper.$vnode.parent.componentInstance.keys.length-1]
就是它的 key！
最终的代码：
layout.vue 中：
<template>
<div>
<my-banner />
<to-tab v-model="touchTask.value" :data="touchTask.data" @change="taskChange" @delete="taskDelete" />
<keep-alive>
<router-view />
</keep-alive>
</div>
</template>
<script>
export default {
mounted() {
this.$nextTick(() => {
this.$root.touchTask.keeper = this.$children[0].$vnode.parent.componentInstance
})
},
methods: {
taskChange(value, item) {
this.$open(value)
},
taskDelete(item) {
const index = this.touchTask.keeper.keys.findIndex(item => item === item.key)
this.touchTask.keeper.keys.splice(index, 1)
delete this.touchTask.keeper.cache[item.key]
}
}
}
</script>
main.js 中：
import Vue from 'vue'
import router from '@/router'
// 利用 mixins + sessionStorage 记录数据并全局共享
Vue.mixin({
data() {
return {
touchTask: {
data: sessionStorage.getItem('touchTasks') ? JSON.parse(sessionStorage.getItem('touchTasks')) : [
{
label: '首页',
value: '/home'
}
],
keeper: null,
value: sessionStorage.getItem('touchTask') || ''
}
}
}
})
// 创建 vue 实例
const vm = new Vue({
router,
render: (h) => h(App)
}).$mount('#container')
// 定义打开页面的方法
Vue.prototype.$open = (path, title) => {
router.push(path)
// 必须延迟一下，相当于 this.$nextTick，否则获取到的 keys 少了最新的
setTimeout(() => {
if (!vm.touchTask.data.some(item => { return item.value === path })) {
vm.touchTask.data.push({
label: title,
value: path,
key: vm.touchTask.keeper.keys[vm.touchTask.keeper.keys.length - 1]
})
}
vm.touchTask.value = path
sessionStorage.setItem('touchTasks', JSON.stringify(vm.touchTask.data))
sessionStorage.setItem('touchTask', vm.touchTask.value)
}, 1)
}
tab 组件用 touch-vue 或者 element-ui 的。
touch-vue 官网：touchui-vue.wadecn.com
网友评论