美文网首页
vue ---- 刷新当前页面无白屏跳转

vue ---- 刷新当前页面无白屏跳转

作者: 牛会骑自行车 | 来源:发表于2023-01-11 13:32 被阅读0次
这个功能可以用在tagViews的刷新操作中 直接replace这个path会报错

参考了.......基本上是抄来的哈哈哈哈哈哈vue-element-admin中的处理方式, 设置一个空白页面作为中转站, 将要去的path作为参数保存在redirectPage的query中.
先跳转去redirectPage, 随即跳转回刚刚想要刷新的页面.

先添加一个空白页面 redirect.vue ⬇️

<script>
export default {
    name: "redirect-page",
    created() {
        let nextPath = this.$route.query.path;
        this.$router.replace(nextPath);
    },
    // 解决报错: Failed to mount component: template or render function not defined.
    // 页面中必须存在其一: 要么有template模板, 要么有render函数. 
    render: (h) => {
        return h();
    }
}
</script>

设置router的文件中添加一条路由 ⬇️

{
    path: "/redirect",
    hidden: true,
    component: Layout,
    children: [
        {
            path: '/redirect',
            name: "redirect-page",
            component: () => import('@/views/redirect.vue')
        }
    ]
},

按理说在router文件中应该在/redirect后面接一个query的参数/:这种......但....就没写它也可以😂出事儿再说~

tag组件中刷新的方法 ⬇️

this.$router.replace({
    path: '/redirect',
    query: {
        path: this.$route.fullPath
    }
});

tada~~~无白屏刷新当前页面就完成啦~

相关文章

网友评论

      本文标题:vue ---- 刷新当前页面无白屏跳转

      本文链接:https://www.haomeiwen.com/subject/nabbcdtx.html