vue 路由不加载缓存内容

Vue 路由不加载缓存内容的方法有多种。下面介绍两种常用的方式：

1. 在 Vue Router 中配置路由：
可以通过配置路由的 `meta` 字段来实现不加载缓存内容。在定义路由时，给相应的路由对象添加 `meta` 字段，然后在路由组件的 `beforeRouteEnter` 守卫中判断 `meta` 字段的值，决定是否加载缓存内容。例如：

const routes = [
  {
    path: '/',
    component: Home,
    meta: { noCache: true } // 设置不加载缓存内容
  }
]

然后在路由组件中的 `beforeRouteEnter` 守卫里判断 `meta` 字段的值：

export default {
  beforeRouteEnter (to, from, next) {
    if (to.meta.noCache) {
      // 不加载缓存内容，执行相应的逻辑
    }
    next()
  }
}

2. 使用 `key` 特性：
在使用 Vue Router 的 `<router-view>` 组件时，可以给它添加 `key` 特性来实现不加载缓存内容。每次路由切换时，更新 `key` 特性的值即可。例如：

<router-view :key="$route.fullPath"></router-view>

每当路由发生变化时，`key` 的值会发生改变，这样就能够确保视图组件会重新加载，不受缓存影响。

需要注意的是，以上方法只适用于不需要持久化状态的场景。如果需要在页面切换后保持之前的状态，可以考虑使用 Vuex 来进行状态管理。