vue利用keep-alive/beforeRouteLeave前進刷新后退不刷新(緩存)

 

keep-alive緩存

在vue中默認router-link進入頁面組件都是不緩存的。對於數據不會更新的頁面。可以使用keep-alive來緩存以提高性能。

在項目src/router/index.js中。對於需要緩存的路由加meta中加上keepAlive: true

export default new Router({
  routes: [
    {path: '/',
      redirect: '/Home',
      meta: {keepAlive: true,}
    },
]
})

在app.vue中

把
<router-view></router-view>
改為
<keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
    

 

利用beforeRouteLeave動態決定要不要緩存刷新。

要求：

首頁Home-列表頁List-詳情頁Detail。前進刷新，后退不刷新，且還在原來的滾動位置。

即除了在詳情頁退到列表頁不刷新外，其他方式（搜索、分類、推薦等）進入列表都刷新。

在router/index.js中，Llist路由加上keepAlive: true, 

 

{
      path: '/list/:categoryId?/',
      name: 'List',
      component: List,
      meta: {
        keepAlive: true, 
},
{
      path: '/detail/:goodsId',
      name: 'Detail',
      component: Detail
}

 

在vue中

 beforeRouteLeave (to, from, next) { }

表示在路由頁面離開時執行。

其中to表示下一個要進入的路由。form表示當前頁面路由。next()表示執行跳轉。

我們只需要在函數中判斷，只要下一級是Detail則把List的keepAlive設為true，其他設為false即可。

beforeRouteLeave (to, from, next) {
        if (to.name == "Detail"){
            from.meta.keepAlive = true;
        }else{
            from.meta.keepAlive = false;
        }
        next();
    },