vue 路由缓存跳转带参数的路由后就无法缓存了

在 Vue 路由中，如果你希望路由带有参数并且能够被缓存，你可以使用 `vue-router` 提供的 `keep-alive` 组件。

你可以在路由组件的外面包一层 `keep-alive` 组件，这样该路由组件就会被缓存，并且在切换路由时不会重新渲染。

例如：

<template>
  <div>
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

注意：如果你的路由组件中使用了 `watch` 或者其他异步操作，那么这些操作并不会在组件被缓存后停止，所以你可能需要使用 `activated` 和 `deactivated` 生命周期钩子来处理这些操作。

<template>
  <div>
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
export default {
  activated() {
    // 在组件激活时调用
  },
  deactivated() {
    // 在组件停用时调用
  }
}
</script>

希望这些信息能够帮助你解决问题。

相关问题

vue 路由跳转不缓存

要想在 Vue 路由跳转时不缓存页面，可以通过在路由配置中设置 `meta` 属性来实现。具体来说，可以在路由配置中添加一个 `meta` 属性，然后在该属性中设置 `noCache` 属性为 `true`，如下所示：

const router = new VueRouter({
  routes: [
    {
      path: '/example',
      component: Example,
      meta: {
        noCache: true
      }
    }
  ]
})

然后，可以在路由的 `beforeRouteLeave` 钩子函数中判断是否需要清除缓存。具体来说，可以在 `beforeRouteLeave` 函数中获取路由中的 `meta` 属性，并根据 `noCache` 属性来判断是否需要清除缓存，如下所示：

const Example = {
  // ...
  beforeRouteLeave(to, from, next) {
    if (to.meta.noCache) {
      // 清除缓存
    }
    next();
  }
}

这样就可以实现在 Vue 路由跳转时不缓存页面。

vue3路由跳转页面数据缓存

在Vue3中，可以通过使用keep-alive组件和导航钩子函数来实现路由跳转页面数据缓存。首先，在路由中设置需要缓存的页面，并使用keep-alive组件将其包裹起来。可以使用v-if指令来判断哪些页面需要缓存，为true的是需要缓存的，false是不需要缓存的。这是第一步。

然后，在需要缓存的页面设置导航钩子函数beforeRouteUpdate。这个钩子函数可以在每次路由更新之前执行，并在回调中执行需要数据更新的业务逻辑。例如，可以在这里重新发送分类数据接口请求，以更新页面数据。

综上所述，以上是实现Vue3路由跳转页面数据缓存的方法。通过使用keep-alive组件和导航钩子函数，可以在页面之间实现数据的缓存和更新。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue页面跳转实现页面缓存操作](https://download.csdn.net/download/weixin_38673924/13128304)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue3-解决路由缓存问题-方案一：使用key；方案二：使用onBeforeRouteUpdate](https://blog.csdn.net/qq_45811054/article/details/130948701)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]