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数据驱动试图的实现方法及原理

    Vue数据驱动试图的实现方法及原理

    当Vue实例中的数据(data)发生变化时,与之相关联的视图(template)会自动更新,反映出最新的数据状态, Vue的数据驱动视图是通过其响应式系统实现的,以下是Vue数据驱动视图实现的核心原理,需要的朋友可以参考下
    2024-10-10
  • vue中多个倒计时实现代码实例

    vue中多个倒计时实现代码实例

    这篇文章主要介绍了vue中多个倒计时实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • vue、react等单页面项目应该这样子部署到服务器

    vue、react等单页面项目应该这样子部署到服务器

    这篇文章主要介绍了vue、react等单页面项目应该这样子部署到服务器,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • Vue项目中引入外部脚本的多种方式

    Vue项目中引入外部脚本的多种方式

    在现代的前端开发中,我们经常需要使用一些第三方的外部脚本或库,尤其是像地图、图表、分析工具等,在 Vue 项目中,有多种方式可以引入外部脚本,本文将详细介绍在 Vue 项目中引入外部脚本的几种常见方法,需要的朋友可以参考下
    2025-01-01
  • 详解Vue快速零配置的打包工具——parcel

    详解Vue快速零配置的打包工具——parcel

    本篇文章主要介绍了详解Vue快速零配置的打包工具——parcel,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 使用vue.js开发时一些注意事项

    使用vue.js开发时一些注意事项

    使用vue.js进行项目的开发已经有了一定的时间,在任务的过程中以及和不同的开发使用者交流中,逐渐对vue.js的使用心得有了一定的积累。本文主要给大家分享一些开发时需要注意的事项
    2016-04-04
  • vue如何循环给对象赋值

    vue如何循环给对象赋值

    这篇文章主要介绍了vue如何循环给对象赋值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue之el-tree懒加载数据并且实现树的过滤问题

    vue之el-tree懒加载数据并且实现树的过滤问题

    这篇文章主要介绍了vue之el-tree懒加载数据并且实现树的过滤问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 浅谈Vue3的几个优势

    浅谈Vue3的几个优势

    这篇文章主要给大家分享的是Vue3的几个优势,Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化,下面我们一起进入文章看看具体详情吧
    2021-10-10
  • vue项目登录页面实现记住用户名和密码的示例代码

    vue项目登录页面实现记住用户名和密码的示例代码

    本文主要介绍了vue项目登录页面实现记住用户名和密码的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07

最新评论