vue keep-alive解决关闭标签动态缓存问题

直接上代码:
<keep-alive :include='topNavMentNames'>
  <router-view ></router-view>
</keep-alive>
include会选择性的缓存,没有的会选择不缓存,
exclude则相反,
topNavMentNames 是数组这里面存的是个组件的name名!大致长这样["a","b","c"]  ,注意是在文件里name名!关闭标签时就splice截取掉topNavMentNames 里相对应的组件名。
例子:
export default {
  data() {
    return {
      name:'app_userCtrl', //页面里的name名
    }
  }
}
我之前 这样是不好使的!尝试了各种办法 结果原因是我的路由有问题!路由梳理一下 要按正规的走
我的路由大致是这样的:
routes: [
{
path: '/home',
component: Home,
name: 'Home',
redirect: '/home/table',
children: [
{
path: 'table', name: '表格', component: resolve => require(['../view/nav/Table.vue'], resolve)
},
{
path: 'form', name: '表单', component: resolve => require(['../view/nav/Form.vue'], resolve)
},
{
path: 'charts', name: 'Charts', component: resolve => require(['../view/nav/charts.vue'], resolve)
},
{
path: 'article', name: '文章', component: r => require(['../view/nav/Article.vue'], r)
},
{
path: 'article/add', name: '新增文章', component: r => require(['../view/admin/Post.vue'], r)
},
{
path: 'article/:postId', name: '文章详情', component: r => require(['../view/admin/PostDetail.vue'], r)
}
]
},
]
因为路由时从后端传过来的,路由path里不要随意加"/"他默认的上级路由会改变的
 
 

猜你喜欢

转载自www.cnblogs.com/li-xue-/p/10562904.html
今日推荐