vue 页面缓存和不缓存方法

利用 <keep-alive></keep-alive> 标签页面缓存

1. 在App.vue 中来判断各个组件是否缓存

<div id="app">
    <!--缓存想要缓存的页面，实现后退不刷新-->
    <!--加上v-if的判断，可以自定义想要缓存的组件，自定义在router里面-->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>

    <!--这里是其他的代码-->
  </div>

2. 在配置路由 router.js 中来控制某个组件是否需要缓存

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta:{keepAlive: true} // 这个组件需要缓存 true
    },{
      path:'/eleme',
      component:Eleme,
      meta:{keepAlive: false} // 这个组件不需要缓存false(不写默认不缓存)
    }
  ]
})

设置为缓存之后不会触发组件销毁周期

3 .路由前进刷新、后退不刷新 keep-alive
可以使用导航钩子beforeRouteEnter、beforeRouteLeave等等和location.reload();

beforeRouteEnter(to, from, next) {    //beforeRouteEnter在mounted之前执行,进入页面的时候就会执行
	console.log(to)
	console.log(from);
	if (from.path == '/c') {
		to.meta.keepAlive = false; // B 跳转到 A 时，让 A 缓存，即不刷新（代码写在B页面）
		next(function () {
			location.reload();     //next()和keep-alive组合，可以实现第二次进入页面的时候重新调用接口，而不是缓存
		});
	} else {
		to.meta.keepAlive = true;
		next();
	}
}