vue-router路由复用后页面没有刷新

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>

了解更多