美文网首页
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