摘要：
Vue路由器提供页面路由功能，可用于构建单页面应用程序。当使用vue路由器的动态路由匹配时，url会发生变化，但页面没有任何动态问题。记录它。动态路由匹配url已更改，但组件未更改，因为vue重用了该组件。因为两条路由都渲染相同的组件，所以重用比销毁和重新创建更有效。
vue-router提供了页面路由功能，可以用来构建单页面应用，在使用vue-router的动态路由匹配的时候，遇到了url变化了，但是页面却没有任何动静的问题，记录一下。
动态路由匹配url变化了，但是组件没有变化是因为vue进行了组件复用，因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。所以我们需要手动进行数据刷新。
一、使用watch来监听当前的路由变化，从而实现数据刷新。
import { watch } from "vue";
import router from "./router";
export default {
setup() {
// vue2
// watch: {
// $route(to, from) {
// // 对路由变化作出响应...
// }
// }
// vue3
watch(router.currentRoute, () => {
console.log("路由发生了变化");
});
}
};也可以使用2.2中新加的beforeRouteUpdate路由守卫：
export default {
setup() {
},
beforeRouteUpdate((to, from, next) => {
// 不要在这里调用next
// 通过to来判断是否重载数据
console.log("路由发生了变化");
}),
}以上就是vue3中使用vue-router-next来处理动态路由变化导致页面不刷新的方法。
二、在layout.vue，给路由增加时间时间戳。
<div class="main-box">
<transition name="fade" mode="out-in">
<router-view :key="new Date().getTime()"></router-view>
</transition>
</div>