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

 

keep-alive缓存

在vue中默认router-link进入页面组件都是不缓存的。对于数据不会更新的页面。可以使用keep-alive来缓存以提高性能。

在项目src/router/index.js中。对于需要缓存的路由加meta中加上keepAlive: true

1 export default new Router({
2   routes: [
3     {path: '/',
4       redirect: '/Home',
5       meta: {keepAlive: true,}
6     },
7 ]
8 })

在app.vue中

1 把
2 <router-view></router-view>
3 改为
4 <keep-alive>
5       <router-view v-if="$route.meta.keepAlive"></router-view>
6 </keep-alive>
7 <router-view v-if="!$route.meta.keepAlive"></router-view>
8     

利用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即可。

1 beforeRouteLeave (to, from, next) {
2         if (to.name == "Detail"){
3             from.meta.keepAlive = true;
4         }else{
5             from.meta.keepAlive = false;
6         }
7         next();
8     },