博客

使用keep-alive场景：列表页 -> 详情页 ->列表页（使用keep-alive缓存列表页）

方法一：这种方法不管从哪个页面返回到list页面，list页面都不刷新，不建议使用

		<!-- 注：list是组件名 -->
	
 		<keep-alive include="list">
          <router-view />
        </keep-alive>

<!-- 注：在所需缓存的页面定义组件名 -->
<script>
	export default {
	   name: 'list',
	  
	  data() {}
	}
</script>

方法二：

步骤①

<!-- 注：需要缓存的组件 -->
<keep-alive>
	<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 注：不需要缓存的组件 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>

步骤②：在定义路由中需要缓存的组件定义为 keepAlive：true ，不需要缓存的可以省略

meta: {
     keepAlive: true, //此组件要被缓存
 },

步骤③：router.js里加上 挂载路由导航守卫

注：

‘/goods_control/list’ 表示列表页的路径

‘/goods_control/detail’ 表示详情页的路径

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
    //判断是否需要缓存
     if (to.path === '/goods_control/lists' && from.path === '/goods_control/detail') {
    	to.meta.keepAlive = true; // 让 列表页 缓存，即不刷新
      next();
	  } else {
	   to.meta.keepAlive = false; // 让 列表页 不缓存，即刷新
	      next();
	  }
})

注：这种写法存在一个问题，就是第一次从列表页跳到详情页再返回列表页时列表页面不缓存还是会刷新数据，就是第一次不生效。下面是改过后的写法，有点麻烦，之后要是再有别的办法会补上：

正确写法：

步骤一： 把上面的 步骤③ 去掉

步骤二：在详情页加上 钩子函数beforeRouteLeave（回到列表页就缓存列表页面，即不刷新）

 //判断列表页是否刷新
  beforeRouteLeave(to, from, next) {
    if ((to.path === '/goods_control/lists') {  //
      to.meta.keepAlive = true
      next()
    } else {
      next()
    }
  },

步骤三：在列表页上的其他可跳转页面的按钮，比如 编辑按钮等 加上 钩子函数beforeRouteLeave（回到列表页不缓存列表页面，即刷新）

//判断列表页是否刷新
 beforeRouteLeave(to, from, next) {
   if ((to.path === '/goods_control/lists') {  //
     to.meta.keepAlive = false
     next()
   } else {
     next()
   }
 },