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页面更新的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Vue项目中使用addRoutes出现问题的解决方法

    目录 前言 一.404页面 1. 出现的原因 2. 解决方案 二.刷新白屏 1. 出现原因 2. 解决方案 三.路由重复 1.  出现原因 2. 解决方案 总结 前言 addRoutes官方介绍: 函数签名: router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合 routes 选项要求的数组. 这两天做vue后台权限管理系统的时候,发现使用vue提供的addRoute添加路由以后,会出现两个bug,一起来看看如何解

  • vue-router之解决addRoutes使用遇到的坑

    最近项目中使用了vue-router的addRoutes这个api,遇到了一个小坑,记录总结一下. 场景复现: 做前端开发的同学,大多都遇到过这种需求:页面菜单根据用户权限动态生成,一个常见的解决方案是: 前端初始化的时候,只挂载不需要权限路由,如登陆,注册等页面路由,然后等用户登录之后,后端返回当前用户的权限表,前端根据这个权限表遍历前端路由表,动态生成用户权限路由,然后使用vue-router提供的addRoutes,将权限路由表动态添加到路由实例中,整个过程大致如下: // router.

  • 解决vue addRoutes不生效问题

    动态添加导航栏时,addRoutes不生效解觉 1.在addroutes前,使用router.options.routes=XXXXX的方法手动添加 2.使用作者的方法,在store里维护一个routes对象,然后使用这个对象遍历生成侧面导航栏 补充知识:vue-router 动态添加路由 router.addRoutes(routes)遇到的二次登陆路由冲突问题解决 起因 在当前项目中使用的iview-admin,路由要根据权限动态生成,是在登录后获取当前用户权限内的路由使用 vue-rout

  • vue addRoutes路由动态加载操作

    需求:增加权限控制,实现不同角色显示不同的路由导航 思路:每次登陆后请求接口返回当前角色路由 核心方法:vue-router2.2.0的addRoutes方法 + vuex 以下是我实现的获取菜单路由的方法,我将该方法的调用放在首页组件的生命钩子中,即便用户刷新浏览器清空了路由还是会重新调用接口获取,不至于会丢失.同时考虑到会有切换用户的可能,所以不将获取到的路由信息保存到cookie或者localstorage当中 获取菜单之前先判断routerState,避免多次请求, 我这里使用eleme

  • vue 解决addRoutes多次添加路由重复的操作

    我就废话不多说了,大家还是直接看代码吧~ import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const createRouter = () => new Router({ mode: 'history', routes: [] }) const router = createRouter() export function resetRouter () { const newRouter = createR

  • 使用VueRouter的addRoutes方法实现动态添加用户的权限路由

    最近做vue 单页项目涉及到多角色用户权限问题,不同的角色用户拥有不同的功能权限, 不同的功能权限对应的不同的页面 git: https://github.com/pch1024/dynamicRouter 举个例子: 角色A =>功能1 =>功能2 =>功能3 角色B =>功能1 =>功能4 =>功能5 第1步 定义默认路由和动态路由 //动态路由(所有角色的都在这里,我们都做好组件页面了所以我们一定有这个,防君子不防小人) export const dynamicR

  • 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 =

  • vue在App.vue文件中监听路由变化刷新页面操作

    在路由跳转时,会出现页面需要重新刷新一遍才能获取数据加载页面,这时添加一个监听器,如果跳转到页面刷新一次. export default { name: 'App', provide(){ return{ reload:this.reload } }, data(){ return { isRouterAlive:true, } }, //监听器 watch: { // 方法1 '$route' (to, from) { //监听路由是否变化 // console.log(999) if(to.

  • vue3中router路由以及vuex的store使用解析

    目录 vue3 router路由及vuex store使用 1.路由 2.vuex vue3中router路由和vuex的store使用,获取对象基本使用 vue3中router和store使用方法 1.企业开发Router全局配置 2.企业开发Store全局配置 功能快捷键 vue3 router路由及vuex store使用 1.路由 <script> import { useRouter, useRoute } from 'vue-router' export default {   s

  • vue3中$attrs的变化与inheritAttrs的使用详解

    目录 在vue3中的$attrs的变化 在vue2中的$attrs 父组件的属性直接渲染在根节点上 在vue3中的$attrs的变化 $listeners已被删除合并到$attrs中. $attrs现在包括class和style属性. 也就是说在vue3中$listeners不存在了.vue2中$listeners是单独存在的. 在vue3 $attrs包括class和style属性, vue2中 $attrs 不包含class和style属性. 在vue2中的$attrs 在Vue 2中,at

  • vue3配置router路由并实现页面跳转功能

    目录 1.安装vue-router 2.根目录下新建router文件夹,下面新建index.js文件和routes.js 2.1文件中引入vue方法.配置页面具体路径 3.main.js文件中引入路由 4.APP.vue里声明路由的占位符<router-view></router-view> 5.测试 6.文件代码 1.安装vue-router 用vue3需要安装版本4.0以上的vue-router,安装命令: npm install vue-router@next --save

  • 关于React中使用window.print()出现页面无响应问题解决记录

    目录 一.问题背景: 二.问题原因: 三.问题解决: 总结: 一.问题背景: window.print()页面打印出现页面无响应 看了网上很多办法都是让用window.location.reload(),对于这个解决方案不置可否,刷新页面当然可以解决这个问题,但是不高级 二.问题原因: 可能操作了document但是并未进行销毁(可能是) 三.问题解决: 消除操作的document 封装一个printFun()方法 //该方法参数 content:需要打印的元素 printFun = (cont

  • vue3中update:modelValue的使用与不生效问题解决

    目录 v-model中update:modelValue 写法: 使用: vue3子组件update:modelValue不生效问题 总结 v-model中update:modelValue v-model的主要原因是由于value和input事件可能另有它用,那么我们可不可以直接使用另外的属性和方法,而不需要去通过model进行定义. vue3中就实现了这个功能,v-model绑定的不再是value,而是modelValue,接收的方法也不再是input,而是update:modelValue

  • vue3中关于路由hash与History的设置

    目录 关于路由hash与History的设置 1.history 关键字:createWebHistory 2.hash 关键字:createWebHashHistory 路由中hash和history模式区别 1.hash模式 2.history模式 3.两者对比 关于路由hash与History的设置 1.history 关键字:createWebHistory import { createRouter, createWebHistory } from 'vue-router' const

  • Vue3中如何使用异步请求示例详解

    Vue3中如何使用异步请求示例详解

    目录 1.前言 2.快速开始 2.1.思路 2.2.安装&封装axios 2.3.设计接口 2.4.设计视图 2.5.最终效果 总结 1.前言 接上节,我们初步体验了layui-vue的用法.相比其他ui框架,layui-vue的数据结构显得不是非常友好,但是经过数据拼凑也是能够成功运行的. 今天我们就主要介绍下在实际开发中最常用到的前后端接口交互.因为大多数时候前端为了高性能,对于后端接口的调用都会采用异步的方式.那该如何在vue3中使用异步请求渲染页面呢? 2.快速开始 2.1.思路 预期:

  • Vue3中使用Element Plus时el-icon无法显示的问题解决

    Vue3中使用Element Plus时el-icon无法显示的问题解决

    目录 问题描述 解决方案 总结 问题描述 按照官方文档安装了icons $ npm install @element-plus/icons 然后在页面中使用 <template> <!-- <Header /> --> <!-- Icon 图标 --> <el-icon><edit /></el-icon> <el-icon><fold /></el-icon> <el-icon&

随机推荐