vue缓存当前路由（在输入框中输入信息后，跳转其他路由再回来，仍可看到刚刚输入的内容等）

【相关推荐】

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7741370
• 这篇博客也不错, 你可以看下vue路由缓存（子路由缓存、动态路由缓存、滚动条相互影响）
• 您还可以看一下 汤小洋老师的全新Vue3.0全家桶 零基础入门到项目实战课程中的 错误提示功能的实现小节, 巩固相关知识点
  
• 除此之外, 这篇博客: vue路由跳转回退后页面不刷新处理中的 vue路由跳转回退后页面不刷新处理 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  ·利用keep-alive 缓存需要缓存的页面
  具体实现流程
  1.在app.vue中改写router-view

  <keep-alive>
      <router-view v-if="$route.meta.keepAlive">
          <!-- 这里是会被缓存的视图组件，比如page,page1,page2 -->
      </router-view>
  </keep-alive>
  

  2.在router/index.js中添加路由元信息，设置需要缓存的页面

  routes: [{
          path: '/',
          name: 'index',
          component: index,
          meta: {
              keepAlive: false, //此组件不需要被缓存
          }
      },
      {
          path: '/page1',
          name: 'page1',
          component: page1,
          meta: {
              keepAlive: true, //此组件需要被缓存
              
          }
      }
  ]
  

  钩子函数的执行顺序

  • 不使用keep-alive
    beforeRouteEnter --> created --> mounted --> destroyed
  • 使用keep-alive
    beforeRouteEnter --> created --> mounted --> activated --> deactivated

  再次进入缓存的页面，只会触发beforeRouteEnter -->activated --> deactivated 。
  created和mounted不会再执行。
  3. 需缓存的页面的写法

  • data中初始化,存放从后台获取的数据

   data() {
         return {
           Arr: []  // 加载页面后执行获取数据的方法，插入到此
         };
  }
  

  • methods中创建一个方法,获取数据

   methods: {
         getData() {
           // getData方法，要保存的数据
           this.Arr = this.scrmMgroup;
         }
       }
  
  

  • 修改router/index.js中的配置

     每次进入页面，我们都需要知晓是从哪个页面进来的，用以判断是否需要获取数据。
     在router/index.js的meta中添加isBack变量，默认false
    

  {
            path: '/page1',
            name: 'page1',
            component: page1,
            meta: {
                keepAlive: true, //此组件需要被缓存
                isBack:false, //用于判断上一个页面是哪个
            }
        },
  

  • beforeRouteEnter中判断是从哪个页面过来的

  beforeRouteEnter(to, from, next) {
        if(from.name=='posters'){
            to.meta.isBack=true;
            //判断是从哪个路由过来的，
        }
        next();
      },
  
  

  • activated中执行getData这个获取数据的方法

     因为这个页面需要缓存。只有第一次进入时才会执行created和mounted方法，再次进入就不执行了。而activated每次进入都执行，所以在这个钩子函数中获取数据。
    

  activated() {
    if(!this.$route.meta.isBack){
      // 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
      this.getData();
    }
    // 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
    this.$route.meta.isBack=false
  },
  
  

  使用keep-alive后，只有第一次进入后会触发created钩子函数，再次进入就不再执行了。当用户刷新了页面，这个钩子函数就会又执行所以可以在data中定义变量isFirstEnter用来判断是否第一次进入，或是否刷新了页面，默认false。created中把isFirstEnter变为true，说明是第一次进入或刷新了页面。activated中增加判断条件

   activated() {
       if(!this.$route.meta.isBack || this.isFirstEnter){
           // 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
           // 如果isFirstEnter是true，表明是第一次进入此页面或用户刷新了页面，需获取新数据
           this.Arr=[]
           // 把数据清空，可以稍微避免让用户看到之前缓存的数据
           this.getData();
       }
       // 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
       this.$route.meta.isBack=false
       // 恢复成默认的false，避免isBack一直是true，导致每次都获取新数据
       this.isFirstEnter=false;
     },
  

  参考了https://blog.csdn.net/qq_40963664/article/details/80062130

晚上好🌙🌙🌙
本答案参考ChatGPT-3.5

好的，针对你的问题“vue缓存当前路由（在输入框中输入信息后，跳转其他路由再回来，仍可看到刚刚输入的内容等）”，我可以给出如下解决方案：

1.使用keep-alive缓存组件 在Vue中，我们可以使用keep-alive来缓存组件。当组件被缓存时，组件的状态和数据将被保留，因此在再次渲染组件时，可以保留上次的状态和数据。

具体实现方式如下：

（1）在组件的外层包裹标签，同时添加一个唯一的key属性，用于区分不同的缓存组件。

（2）在组件中使用v-model来绑定输入框的值，这样可以实时同步数据。

（3）在路由的meta中添加keepAlive:true属性，用于告诉Vue是否需要缓存该路由组件。

示例代码如下：

<template>
  <div>
    <input type="text" v-model="inputValue">
  div>
template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      inputValue: ''
    }
  },
  beforeRouteLeave(to, from, next) {
    if (from.meta.keepAlive && to.meta.keepAlive) {
      // 缓存组件
      const cacheKey = this.$route.fullPath
      this.$store.state.cacheData[cacheKey] = {
        inputValue: this.inputValue
      }
    }
    next()
  },
  beforeRouteEnter(to, from, next) {
    if (from.meta.keepAlive && to.meta.keepAlive) {
      // 获取缓存数据
      const cacheKey = to.fullPath
      if (this.$store.state.cacheData[cacheKey]) {
        const { inputValue } = this.$store.state.cacheData[cacheKey]
        next(vm => {
          vm.inputValue = inputValue
        })
        return
      }
    }
    next()
  }
}
script>

2.使用Vuex缓存数据 除了使用keep-alive缓存组件外，我们还可以在Vuex中缓存数据。这种实现方式相对更加灵活，可以在多个组件之间共享数据。

具体实现方式如下：

（1）在Vuex的state中定义一个cacheData对象，用于存储缓存数据。

（2）在组件中使用v-model来绑定输入框的值，这样可以实时同步数据。

（3）在路由的meta中添加keepAlive:true属性，用于告诉Vue是否需要缓存该路由组件。

（4）在beforeRouteLeave钩子中将组件的状态和数据存储到Vuex中。

（5）在beforeRouteEnter钩子中从Vuex中获取存储的状态和数据，并更新组件的状态和数据。

示例代码如下：

<template>
  <div>
    <input type="text" v-model="inputValue">
  div>
template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      inputValue: ''
    }
  },
  beforeRouteLeave(to, from, next) {
    if (from.meta.keepAlive && to.meta.keepAlive) {
      // 缓存数据到Vuex中
      this.$store.commit('setCacheData', {
        key: this.$route.fullPath,
        data: {
          inputValue: this.inputValue
        }
      })
    }
    next()
  },
  beforeRouteEnter(to, from, next) {
    if (from.meta.keepAlive && to.meta.keepAlive) {
      // 从Vuex中获取缓存数据
      const cacheData = this.$store.state.cacheData[this.$route.fullPath]
      if (cacheData) {
        next(vm => {
          vm.inputValue = cacheData.inputValue
        })
        return
      }
    }
    next()
  }
}
script>

// Vuex store
const store = new Vuex.Store({
  state: {
    cacheData: {}
  },
  mutations: {
    setCacheData(state, { key, data }) {
      state.cacheData[key] = data
    }
  }
})

以上就是针对“vue缓存当前路由”的两种实现方案。如果以上方法不能解决问题，可以进一步提供代码进行排查、分析。

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

import { reactive, watchEffect } from 'vue';
import { useRoute, useRouter } from 'vue-router';
export default {
  name: 'CachePage',
  setup() {
    const state = reactive({
      cacheData: {},
    });
    const route = useRoute();
    const router = useRouter();
    watchEffect(() => {
      // 判断当前路由是否需要缓存
      if (route.meta.cache) {
        // 缓存当前路由的输入框内容
        state.cacheData[route.path] = JSON.parse(JSON.stringify(route.query));
      }
    });
    // 监听路由变化，如果跳转到之前缓存的路由，则将之前缓存的输入框内容回填到输入框中
    router.beforeEach((to, from, next) => {
      if (to.meta.cache) {
        const cacheData = state.cacheData[to.path];
        if (cacheData) {
          const query = Object.assign({}, to.query, cacheData);
          next({ path: to.path, query });
        } else {
          next();
        }
      } else {
        next();
      }
    });
    return {
      state,
    };
  },
};

代码解释： 1. 定义一个state对象，其中包含一个cacheData属性存储所有需要缓存的路由输入框数据； 2. 使用useRoute获取当前路由，使用useRouter获取vue-router实例； 3. 使用watchEffect监听route的变化，如果当前路由需要缓存，则将当前路由的输入框数据存储到cacheData中； 4. 在router.beforeEach中，判断当前路由是否需要缓存，如果需要，则从cacheData中取出之前缓存的输入框数据，并回填到当前路由的query中，然后使用next({path: to.path, query})跳转到当前路由；如果不需要缓存，则直接使用next()跳转到当前路由； 5. 最后在setup函数中返回state对象，可以在模板中通过state对象的cacheData属性获取路由输入框的缓存数据。 需要注意的是，要在路由meta中添加cache属性来标记哪些路由需要缓存。例如：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      cache: true, // 需要缓存
    },
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: {
      cache: false, // 不需要缓存
    },
  },
  // ...
];

这样就可以实现vue3中路由缓存的功能了。