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项目中使用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中如何使用异步请求示例详解
目录 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无法显示的问题解决
目录 问题描述 解决方案 总结 问题描述 按照官方文档安装了icons $ npm install @element-plus/icons 然后在页面中使用 <template> <!-- <Header /> --> <!-- Icon 图标 --> <el-icon><edit /></el-icon> <el-icon><fold /></el-icon> <el-icon&
随机推荐
- JS实现的样式切换功能tableCSS实例
- SQL注入绕过的技巧总结
- jQuery EasyUI Tab 选项卡问题小结
- python下函数参数的传递(参数带星号的说明)
- TinyMCE提交AjaxForm获取不到数据的解决方法
- js实现带三角符的手风琴效果
- php替换字符串中间字符为省略号的方法
- 微信第三方登录(原生)demo【必看篇】
- PHP+XML 制作简单的留言本 图文教程
- 大家都应该掌握的PHP关联数组使用技巧
- js改变img标签的src属性在IE下没反应的解决方法
- pjblog发表评论用的ajaxJS.js
- js点击列表文字对应该行显示背景颜色的实现代码
- javascript 基础篇4 window对象,DOM
- js控制多图左右滚动切换效果代码分享
- BootStrap实现树形目录组件代码详解
- 详解nginx静态资源服务器简单配置
- C# 4.0 大数的运算--BigInteger的应用详解
- laravel框架关于搜索功能的实现
- java ThreadLocal使用案例详解