我想实现从tagView切换页面的时候,希望页面能够缓存起来,这样切换的时候不会重新实例化组件,当我从tagView关闭页面,然后从menu从新打开的时候,我希望此时页面能够重新实例化。
我能想到的就是在<router-view/>组件上面在加个父组件<keep-alive/>,但是这样有一个问题就是,不管你是从tagView切换页面还是从menu打开页面,页面永远都会被缓存啊!所以很迷惑应该怎么做,请大佬指点。
页面设置:
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!-- 这里是会被缓存的视图组件 -->
</router-view>
</keep-alive>
在该页面路由里面设置 meta 属性
meta: {
keepAlive: true // 需要被缓存
}
在tagView组件里面设置 beforeRouteLeave:
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive = true; // 让 页面 缓存,即不刷新
next();
}
在menu设置:
beforeRouteLeave(to, from, next) {
// 设置下一个路由的 meta
to.meta.keepAlive = false; // 让 页面 不缓存,即刷新
next();
}
###可以在 keep-alive
中 添加一个动态的 include
或 exclude
来决定是否需要缓存;
类似
<keep-alive :include="includeList">
<route-view />
</keep-alive>
以下是官方解释:
include
和exclude
The
include
和exclude
prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示:<!-- 逗号分隔字符串 --> <keep-alive include="a,b"> <component :is="view"></component> </keep-alive> <!-- regex (使用 `v-bind`) --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> <!-- Array (使用 `v-bind`) --> <keep-alive :include="['a', 'b']"> <component :is="view"></component> </keep-alive>
匹配首先检查组件自身的
name
选项,如果name
选项不可用,则匹配它的局部注册名称 (父组件components
选项的键值)。匿名组件不能被匹配。max
最多可以缓存多少组件实例。一旦这个数字达到了,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉。
<keep-alive :max="10"> <component :is="view"></component> </keep-alive>