vue中页面跳转后再跳回搜索页面搜索框内容怎么多个缓存下来

在Vue中，可以使用Vue Router的导航守卫功能来实现页面跳转后缓存搜索框内容。

首先，需要在Vue Router的路由配置中定义一个全局的导航守卫，用于在离开搜索页面时保存搜索框内容。可以在beforeRouteLeave钩子函数中保存搜索框的值到Vuex的状态管理中，或者使用localStorage将搜索框的值保存到本地。

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/search',
      name: 'search',
      component: SearchPage,
      beforeRouteLeave(to, from, next) {
        // 保存搜索框的值到Vuex或localStorage
        // 例如使用Vuex保存
        store.commit('SAVE_SEARCH_VALUE', this.searchValue)
        next();
      }
    },
    // 其他路由配置...
  ]
});

然后，在搜索页面组件中，可以通过Vue Router的导航守卫钩子函数beforeRouteEnter来获取缓存的搜索框内容，并将其赋值给搜索框。

// 搜索页面组件
export default {
  data() {
    return {
      searchValue: ''
    };
  },
  beforeRouteEnter(to, from, next) {
    // 从Vuex或localStorage中获取搜索框的值
    // 例如使用Vuex
    const searchValue = store.state.searchValue;
    next(vm => {
      // 将搜索框的值赋值给组件的data属性
      vm.searchValue = searchValue;
    });
  },
  // 其他组件逻辑...
}

这样，当从搜索页面跳转到其他页面后再返回搜索页面时，搜索框的内容就会被缓存下来。