直接上代碼:
<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里不要隨意加"/"他默認的上級路由會改變的