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

This article was last updated on days ago, the information described in the article may be outdated.

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来处理动态路由变化导致页面不刷新的方法。

Author: lxz

Permalink: https://blog.justforlxz.com/2020/06/01/vue-router%E8%B7%AF%E7%94%B1%E5%A4%8D%E7%94%A8%E5%90%8E%E9%A1%B5%E9%9D%A2%E6%B2%A1%E6%9C%89%E5%88%B7%E6%96%B0/

updated at 2021-05-10

# Web

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

Comments