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
要求：
首页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 }
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 },
vue利用keep-alive/beforeRouteLeave前进刷新后退不刷新(缓存)
原文：https://www.cnblogs.com/viete/p/11998117.html