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-print-nb解决vue打印问题,并且隐藏页眉页脚方式

    vue-print-nb解决vue打印问题,并且隐藏页眉页脚方式

    这篇文章主要介绍了vue-print-nb解决vue打印问题,并且隐藏页眉页脚方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vuejs路由的传参及路由props配置详解

    vuejs路由的传参及路由props配置详解

    最近在学习vue router的传参,所以下面这篇文章主要给大家介绍了关于vuejs路由的传参及路由props配置的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • 详细分析vue表单数据的绑定

    详细分析vue表单数据的绑定

    这篇文章主要介绍了vue表单数据的绑定的相关资料,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • Vue 父子组件的数据传递、修改和更新方法

    Vue 父子组件的数据传递、修改和更新方法

    下面小编就为大家分享一篇Vue 父子组件的数据传递、修改和更新方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue从后台渲染文章列表以及根据id跳转文章详情详解

    vue从后台渲染文章列表以及根据id跳转文章详情详解

    这篇文章主要给大家介绍了关于vue从后台渲染文章列表以及根据id跳转文章详情的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • vue.js实现图片压缩封装方法

    vue.js实现图片压缩封装方法

    这篇文章主要介绍了vue.js实现图片压缩封装方法,包括全局main.js引入方法,通过引入imgupload方法结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • vue-dplayer 视频播放器实例代码

    vue-dplayer 视频播放器实例代码

    今天小编就为大家分享一篇vue-dplayer 视频播放器实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue使用Vuex一步步封装并使用store全过程

    Vue使用Vuex一步步封装并使用store全过程

    这篇文章主要介绍了Vue使用Vuex一步步封装并使用store全过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • axios的拦截请求与响应方法

    axios的拦截请求与响应方法

    今天小编就为大家分享一篇axios的拦截请求与响应方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 使用webpack搭建vue项目及注意事项

    使用webpack搭建vue项目及注意事项

    这篇文章主要介绍了使用webpack搭建vue项目的方法,本文以开发环境为例,通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06

最新评论