vue3 当页面是动态路由时，刷新后使页面停留在当前页面

在 Vue.js 3 中，可以使用 `keep-alive` 组件来实现页面缓存，即在切换路由时，保留之前已经加载的组件实例。这样即使刷新页面，之前加载的组件状态也会被保留。

首先，在需要缓存的路由组件外层包裹 `keep-alive` 组件：

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

然后，在动态路由组件中，添加 `name` 属性，指定该组件的缓存 key：

export default {
  name: 'MyDynamicComponent',
  // ...
}

这样，当切换到该路由组件时，组件状态会被缓存，刷新页面后依然停留在当前页面。

需要注意的是，`keep-alive` 组件只会缓存有 `name` 属性的组件，且使用动态路由时，需要在路由配置中设置 `props: true`，以便在缓存的组件中获取动态路由参数。