解决vue3多路由跳转同一页面，网址更新页面不更新的问题

子兮不归`

已于 2024-04-10 11:31:18 修改

阅读量510

点赞数 2

文章标签： vue

于 2024-04-10 11:30:21 首次发布

本文链接：https://blog.csdn.net/ChangHuanJiuAn/article/details/137589639

版权

本文介绍了如何在Vue3应用中处理多路由跳转时，确保同一页面地址变化但内容实际更新的问题。通过在组件上使用`key`属性并监听路由变化来实现这一目标，利用了Vue的`ref`、`reactive`和`useRouter`功能。

摘要由CSDN通过智能技术生成

解决vue3多路由跳转同一页面，网址更新页面不更新的问题

解决方法：在当前页面监听路由，在组件上绑定key
代码：下面展示一些 内联代码片。

// 组件
<Model :key="times" />
// 监听路由
import { ref, reactive, onMounted, watch } from "vue";
import { useRouter} from "vue-router";
const router = useRouter();
const times = ref(new Date().getTime());
watch(
  () => router.currentRoute.value,
  (n) => {
    times.value = new Date().getTime();
  },
  { immediate: true, deep: true }
);