Vue 路由缓存

Posted 2020-10-15 小上海耀阳

问题 在路由切换时不需要每次 点击都刷新子路由   尤其是在form表单的情况下  不能让用户 输入一半之后点击其他页面  再点回来 表单数据不见了

解决方案  

  vue 2.0     之中  有keep-alive   详情 见Vue 官网  

 

 

<keep-alive>
<router-view :key="key"></router-view>
</keep-alive>

如果想要这个  单个子路由 不刷新    只需要控制 key    key值不变 缓存   一直存在   想要路由刷新 将key值  改为  前面没有的

<template>
  <section class="app-main">
    <transition name="fade" mode="out-in">
    	
       <keep-alive>
      		<router-view :key="key"></router-view>
       </keep-alive>
    </transition>
  </section>
</template>

<script>
export default {
  name: ‘AppMain‘,
  computed: {
    key() {
    	if(this.$route.name==undefined&& this.$route.path==‘/home‘){
    		//页面第一次加载时 清空 tab 标签页上的所有标签 回到首页
    	   this.$store.dispatch(‘delAllViews‘)
    	}
    	let onlykey = ‘‘
    	let clicked = ‘‘
    	if(!this.$route.meta.clicked){
    		 onlykey = this.$route.path +"0"
    		 clicked = ‘0‘
    	}
    	else{
    		//上一次的状态为0
    		if(this.$route.meta.clicked==‘0‘){
    			//这一次有参数
    			if(Object.keys(this.$route.query).length!=0 || this.$route.hash==‘#new‘){
    				onlykey = this.$route.path +"1"
    				 clicked = ‘1‘
    			}
    			//这一次无参
    			else{
    				onlykey = this.$route.path +"0"
    				 clicked = ‘0‘
    			}
    		}
    		//上一次的状态不是0 
    		else{
    			//这一次有参数 
    			//在创建新活动时  传入 hash  = new 
    			if(Object.keys(this.$route.query).length!=0 || this.$route.hash==‘#new‘){
    				//这一次的状态     为上一次+1
    				//获取上一次的状态 
    				clicked = (parseInt(this.$route.meta.clicked)+1).toString();
    				onlykey = this.$route.path +clicked
    				
    			}
    			//这一次无参 这一次状态不变
    			else{
    				clicked = parseInt(this.$route.meta.clicked).toString();
    				onlykey = this.$route.path +clicked;
    				
    			}
    		}
    	}
    	this.$route.meta.clicked = clicked;
      return  onlykey 
    }
  },
  
  
}
</script>

　　代码仅供参考  （业务比较复杂 写了一大推逻辑）!