Keep-alive 第二次才實現
发布于 3 年前 作者 feer 1339 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

想請問為什麼我的keep-alive 第二次才生效
router設定
const router = new Router({
linkActiveClass: ‘active’,
routes: [
{
path: ‘/’,
name: ‘login’,
component: resolve => require([’@/components/pages/Login’],resolve)
// component: Login, // 對應的元件
},
{
name: ‘Dashboard’, // 元件呈現的名稱
path: ‘/’, // 對應的虛擬路徑
component: resolve => require([’@/components/Dashboard’],resolve),
// component: Dashboard, // 對應的元件
redirect: ‘/Videolist’,
children: [

  {
    path: 'Videolist',
    name: 'VideoList',
    // component: VideoList,
    component: resolve => require(['@/components/pages/VideoList'],resolve),
    meta: { requiresAuth: true,scrollToTop: true,keepAlive: false,
    }
  },
  {
    path: 'Detail',
    name: 'Detail',
    // component: Detail
    component: resolve => require(['@/components/pages/Detail'],resolve),
    meta: { requiresAuth: true,scrollToTop: true,keepAlive: false,
    }
  },
  {
    path: 'Player',
    name: 'Player',
    // component: Player
    component: resolve => require(['@/components/pages/Player'],resolve),
    meta: { requiresAuth: true,scrollToTop: true,keepAlive: false,
    },
    
  },
  {
    path: 'Favorites',
    name: 'Favorites',
    // component: Favorites
    component: resolve => require(['@/components/pages/Favorites'],resolve),
    meta: { requiresAuth: true,scrollToTop: true,keepAlive: false,
    }
  },
]
},

],
router.beforeEach((to, from, next) => {
//判断是否需要缓存
if(to.path === ‘/Detail’ && from.path === ‘/Videolist’){

if(store.state.refreshPage===false){
  from.meta.keepAlive = true;
  next();
}else{
  from.meta.keepAlive = false;

  next();
}
  // 让 列表页 缓存,即不刷新
// console.log('page dont_refresh')

}else {
// to.meta.keepAlive = false; // 让 列表页 即不缓存,刷新
// console.log(‘page refresh’)
console.log(‘goto_’+to.meta.keepAlive)
next();
}

})

export default router;

頁面內有設置
keep-alive>
router-view v-if="$route.meta.keepAlive">
!-- 这里是会被缓存的视图组件,比如 Home! -->
/router-view>
/keep-alive>
router-view v-if="!$route.meta.keepAlive">

我的想法是滿足特定條件時
在A->B時 將A的keep-alive設為true(keepA頁面)然後跳轉到B
當B回到A的時候應該要看到之前的keep的A

我在第一次更改store.state.refreshPage為false的時候
有確認過to.meta.keepAlive是true了但keep-alive卻沒有生效
但是第二次在一次設定store.state.refreshPage為false的時候
keep-Alive卻生效了
有沒有大佬能解

回到顶部