vue使用keepAlive

vue使用keepAlive保留页面历史状态，避免重复渲染。

首先记录一下本次使用keepalive组件实现的功能：从指定页面返回时保留上次浏览及选择状态。

首先在app.vue中

 <div id="app">
  	<keep-alive>
      <router-view v-if="$route.meta.keepAlive" :key="key" />
    </keep-alive>
      <router-view v-if="!$route.meta.keepAlive" :key="key" />
  </div>

使用keepAlive组件将router-view包裹住，通过route.meta中的keepAlive来判断是否进行保留状态。那路由中想要保留状态的页面需要加上这个标识：

{
        path:'/operMainNewleftdetail',
        name:'运行中心-规格明细',
        component: operMainNewleftdetail,
        meta:{
        	keepAlive: true
        }

但此时不管从任何路径进入此A页面都会保留上次的状态，而我这里=指向从B进入A是保留状态，其他页面进入A时重新渲染，那次是需要在A页面的vue文件中做路由判断：

beforeRouteLeave(to,from,next){
			//当从A访问页面B时，此时A页面开启页面保存
	    	if(to.path == '/B'){
	    		if(!from.meta.keepAlive){
	    			from.meta.keepAlive = true;
	    		}
	    		next();
	    	}else{
	    	//如果是进入其他页面则不保存，且摧毁页面再次进入需要渲染。
	    		from.meta.keepAlive = false;
	    		this.$destroy();
	    		next();
	    	}
	    }

还有比较重要的一点，我目前也不是很理解的一点，因为一般页面保存返回的时候就不会有mounted了，所以很可能造成A页面的子组件无值报错的情况：
这里建议加上actived：
**activated()：**在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等。

	//页面的子组件靠mountd进行初始化的话
    mounted() {
      this.initData();
    },
    //进行页面数据的初始化，否则子组件可能因为没有数据会报错。
    activated(){
      this.initData();
    }

最后页面的停留位置也是靠路由来判断，在main.js中进行就可以

router.beforeEach((to, from, next) => {
  if(to.meta.keepAlive){
	  next();
  }else{
	  window.scrollTo(0,0);//切换路由自动滚动到顶部
	  next();
  }
  
});