黑马程序员技术交流社区

标题: 【上海前端】Vue 路由缓存 [打印本页]

---

作者: 叶夜葉    时间: 2019-4-25 13:54
标题: 【上海前端】Vue 路由缓存

转载自：https://www.cnblogs.com/xuewuhen/p/7860701.html

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

解决方案  

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

[AppleScript] 纯文本查看 复制代码

<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>

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2