vue刷新路由不刷新页面
2019-09-03 11:08:02

在vue项目中,我们可能会遇到这种需求,就是需要刷新页面。如果直接刷新页面的话,就会出现白屏的情况,如果刷新路由就不会出现这种情况。
如果直接push当前地址的话,这显然不行。
最好的办法就是弄一个页面用来跳转,需要刷新的页面跳转到那个页面,那个页面利用导航守卫直接跳回来源路由。这个估计会有点不理解,我们来看代码吧。

需要操作刷新的页面:

var query = this.$route.query; //如果有参数就把参数带过去
query.t = Date.now(); //时间戳,这个随意什么都行
if (typeof obj != "string") {
    //刷新页面
    this.$router.replace({
        path: "/routers", //跳转到这个页面
        query: query
    });
} else {
    //指定跳转
    this.$router.replace({
        path: obj,
        query: query
    });
}

routers.vue:

beforeRouteEnter(to, from, next) {
    next(vm => {
        vm.$router.replace({
            path: from.path,
            query: from.query
        });
    });
}
//跳回来源路由,这样就可以直接刷新路由,这样的刷新就不会出现白屏了。
{{item.name}}