vue3动态路由+页面刷新丢失路由+再次加载路由

在Vue 3中，如果遇到动态路由导致页面刷新后丢失路由参数的问题，可以尝试以下解决方案：

1. 使用v-if来确保只有在路由参数存在时才渲染组件。
2. 使用<keep-alive>来缓存组件状态，防止页面刷新时重新渲染。
3. 使用beforeRouteEnter守卫来预先获取路由参数，并将其传递给组件。

以下是一个简化的示例代码：

<template>
  <div v-if="routeParams">
    <!-- 你的组件内容 -->
  </div>
</template>
 
<script>
export default {
  name: 'DynamicRouteComponent',
  data() {
    return {
      routeParams: null
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.routeParams = to.params; // 在这里将路由参数赋值给组件实例
    });
  },
  beforeRouteUpdate(to, from, next) {
    this.routeParams = to.params; // 更新路由时更新组件的路由参数
    next();
  }
};
</script>

使用<keep-alive>来缓存组件：

<template>
  <keep-alive>
    <div v-if="routeParams">
      <!-- 你的组件内容 -->
    </div>
  </keep-alive>
</template>

这样，即使在页面刷新后，组件状态也会被<keep-alive>保存，路由参数也不会丢失。