vue3中addRoute路由变化页面未刷新问题解决

 更新时间:2022年06月01日 15:48:18   作者:杀破狼1914  
这篇文章主要为大家介绍了vue3中addRoute路由变化但页面未刷新问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

路由变化了但页面没有更新

按着vue2的写法写vue3 发现路由变化了但页面没有更新

搜索了半天没有解决办法。

想了半天觉得是重复用同一个对象,vue为了节约性能就没有新建, 被vue3给优化了

解决办法,每次addRoute时 深复制组件对象

import time from "../views/time"
function copyObj(obj) {
    if (typeof obj == "object") {
        if (Array.isArray(obj)) {
            let arr = [];
            for (let item of obj) {
                arr.push(Object.assign(copyObj(item)));
            }
            return arr;
        } else if (obj == null) {
            return null;
        } else {
            let obj1 = {};
            for (let index in obj) {
                obj1[index] = copyObj((obj[index]));
            }
            return obj1;
        }
    } else if (typeof obj == "function") {
        return Object.assign(obj);
    } else if (typeof obj == undefined) {
        return undefined;
    } else {
        return obj;
    }
}
window.pushTime = function () {
    let t = new Date().getTime();
    let path = `/time/${t}`;
    time = copyObj(time)
    this.$router.addRoute({
        path,
        name: path,
        component: time,
    });
    this.$router.push({
        path,
    });
}

以上就是vue3中addRoute路由变化但页面未更新问题解决的详细内容,更多关于vue3 addRoute页面刷新的资料请关注脚本之家其它相关文章!

相关文章

  • Vue生态系统工具库Vueuse的使用示例详解

    Vue生态系统工具库Vueuse的使用示例详解

    Vueuse 是一个功能强大的 Vue.js 生态系统工具库,它提供了一系列的可重用的 Vue 组件和函数,本文将介绍 Vueuse 的主要特点和用法,以及它在 Vue.js 开发中的作用和优势,感兴趣的可以了解下
    2024-02-02
  • Vue+ElementUI实现从后台动态填充下拉框的示例代码

    Vue+ElementUI实现从后台动态填充下拉框的示例代码

    本文主要介绍了Vue+ElementUI实现从后台动态填充下拉框的示例代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • vue3 座位选座矩阵布局的实现方法(可点击选中拖拽调换位置)

    vue3 座位选座矩阵布局的实现方法(可点击选中拖拽调换位置)

    由于公司项目需求需要做一个线上设置考场相关的座位布局用于给学生考机排号考试,实现教室考场座位布局的矩阵布局,可点击选中标记是否有座无座拖拽调换位置横向纵向排列,本文给大家分享实现代码,一起看看吧
    2023-11-11
  • 详解van-cell如何使用插槽

    详解van-cell如何使用插槽

    这篇文章主要为大家介绍了van-cell如何使用插槽详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • 基于Vue3+ts封装一个简单版的Message组件

    基于Vue3+ts封装一个简单版的Message组件

    近日项目中需要使用信息提示框的功能,ui组件库使用的是字节的arco-design-vue,看了一下,现有的Message不满足要是需求,直接使用message组件的话,改样式太麻烦,所以本文就本就介绍了基于Vue3+ts封装一个简单版的Message组件,需要的朋友可以参考下
    2023-09-09
  • vue的props实现子组件随父组件一起变化

    vue的props实现子组件随父组件一起变化

    这篇文章主要为大家详细介绍了vue的props如何实现子组件随父组件一起变化,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • Vue3使用JSX的方法实例(笔记自用)

    Vue3使用JSX的方法实例(笔记自用)

    以前我们经常在react中使用jsx,现在我们在vue中也是用jsx,下面这篇文章主要给大家介绍了关于Vue3使用JSX的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • Vue新搭档TypeScript快速入门实践记录

    Vue新搭档TypeScript快速入门实践记录

    TypeScript 是一种由微软开发的自由和开源的编程语言,它是 JavaScript 的一个超集,扩展了 JavaScript 的语法。这篇文章主要介绍了Vue新搭档TypeScript快速入门实践,需要的朋友可以参考下
    2021-06-06
  • Vue获取input值的四种常用方法

    Vue获取input值的四种常用方法

    Vue是一种流行的Web开发框架,它提供了一个双向绑定的语法糖。在Vue中,我们可以很容易地获取页面上的数据,并且可以实时的响应其变化,这篇文章主要给大家介绍了关于Vue获取input值的四种常用方法,需要的朋友可以参考下
    2023-09-09
  • 浅谈在Vue-cli里基于axios封装复用请求

    浅谈在Vue-cli里基于axios封装复用请求

    这篇文章主要介绍了浅谈在Vue-cli里基于axios封装复用请求,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11

最新评论