vue3 动态路由并页面缓存

在 Vue3 中，动态路由和页面缓存可以通过 Vue Router 和 Keep-Alive 组件来实现。

首先，定义动态路由可以使用 `:to` 属性和 `$router.push()` 方法，例如：

<router-link :to="{ name: 'user', params: { id: userId }}">用户详情</router-link>

在路由配置中使用 `props: true` 可以开启动态路由参数作为组件 props 传递：

const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: User,
    props: true
  }
]

如果需要对页面进行缓存，可以使用 Keep-Alive 组件将组件包裹起来：

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

这样，当切换路由时，组件不会被销毁，而是被缓存下来。如果需要对特定的页面进行缓存，可以在路由配置中设置 `meta: { keepAlive: true }`：

const routes = [
  {
    path: '/user/:id',
    name: 'user',
    component: User,
    props: true,
    meta: {
      keepAlive: true
    }
  }
]

然后在 App.vue 中使用 `v-if` 和 `$route.meta.keepAlive` 来判断是否需要缓存：

<template>
  <div>
    <router-view v-if="!$route.meta.keepAlive" />
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
  </div>
</template>

这样，只有设置了 `meta: { keepAlive: true }` 的页面才会被缓存。