vue router 动态添加路由控制权限时，页面刷新报错

最新推荐文章于 2024-04-22 20:16:08 发布
转载 最新推荐文章于 2024-04-22 20:16:08 发布 · 1.4k 阅读 · 2

本文探讨了在项目中使用路由守卫进行权限验证的方法，实现了登录后按角色分配路由的功能。但在页面刷新时遇到错误，疑似与App.vue中设置的刷新时保留store状态有关。

 

使用全部路由守卫，每次改变路由时，先判断是否拥有角色。没有的话，去获取权限，根据权限添加相应的路由

 

代码完成后，登录可以正常访问，达到预期结果

！！！但是，刷新页面报错

 

原因：

再App.vue中设置了，刷新保存store

可能是因为刷新加载时，把旧的store信息赋值后，破坏了什么东西。。。不懂

 

https://www.jianshu.com/p/bf4cda6b515f?from=groupmessage

梦想家~
关注
Vue动态路由 (验证、页面刷新解决方案)
qq_27664967的博客
08-31 407
Vue动态路由 (验证、页面刷新解决方案) // main.js let whiteRoute = ["/login","/register"] let is_flush = true router.beforeEach((to, from, next) => { let whiteroute = whiteRoute.indexOf(to.path); let isAuthenticated = "认证逻辑" if (whiteroute == -1 && !
VueRouter4动态路由，路由守卫，权限控制
cloki的博客
09-30 2428
VueRouter4动态路由，路由守卫，权限控制
Vue3 router 刷新路由报错 Uncaught SyntaxError Unexpected token
技术前端，忠于热爱 @回忆哆啦没有A梦
12-31 2762
Vue router history模式下 路由刷新白屏，控制台报错：Uncaught SyntaxError Unexpected token
vue3 addRoute 动态路由 页面刷新后 路由失效 [Vue Router warn]: No match found for location with path
热门推荐
ZHANG_666
05-12 4万+
vue-router 4.0 取消了 addRouters 设置动态路由只能使用 addRouter 动态路由一般是从后端获取 然后经过数据格式处理 但在页面刷新后会出现一下警告： vue-router.esm-bundler.js?6c02:71 [Vue Router warn]: No match found for location with path “/formlist/stepform/other” 但通过getRouters又能够获取到所有的异步路由 分析:页面刷新后由于是异步获取的原
vue-router
程序媛的梦工厂
01-25 1270
官方文档 路由模式 hash路由http://www.abc.com/#/hello history路由http://www.abc.com/hello
vue实现权限控制路由(vue-router 动态添加路由)
12-13
用户登录后返回权限菜单，前端根据权限菜单动态添加路由，然后再动态生成菜单栏。 思路如下： 一、定义初始化默认路由。 二、动态配置路由，这里是把所有组件中相应的路由配置成一个个的对象，根据后台返回的菜单tree一个个去匹配。 三、通过匹配，把匹配好的路由数据addRoutes到路由中。 四、为了防止刷新页面后路由数据被清空，这里用判断是否登录的方式，再次加载动态路由。 具体代码如下： router.js import Vue from 'vue' import {router} from './index' import login from '@/views/login/login
Vue如何实现动态路由以及动态路由详解
weixin_45357661的博客
01-11 2987
Vue如何实现动态路由以及动态路由详解
vue中页面跳转拦截器的实现方法
08-29
在单页面应用中，Vue Router是实现路由管理的重要工具，而拦截器则是保证应用安全性和业务逻辑连贯性的关键技术之一。 在Vue中实现页面跳转拦截器，首先要对路由进行定义，在路由配置对象中加入自定义字段，如`...
详解Vue.js项目API、Router配置拆分实践
10-18
拆分后的子router文件不能包含router.start的代码，因为这会导致Vue.js在控制台报错，指出router已经被启动。所以，在子router配置文件中不能存在return router.start(App, '#app');这样的代码。需要确保只有一个...
vue-router的钩子函数用法实例分析
10-16
通过调用next()，可以将导航控制权交给vue-router，以决定是否继续或中断导航。如果在调用next()之前需要执行一些异步操作，则可以将next()作为参数传递给一个回调函数，以在操作完成后进行调用。 - afterEach钩子...
vue-element-admin vue设置动态路由 刷新页面后出现跳转404页面Bug 解决方法
laosao_66的博客
04-22 5348
在使用的过程中，加入权限模块后，刷新后权限控制的页面就默认跳转到404页面了，原因是权限控制的路由模块是动态添加进去的，而我的404监听路由是在默认路由里面的，优先级比动态路由要高，所以刷新后默认先被404接管了，改一下，把404监听路由注释掉需要手动在动态路由加载后，再把通配路由加上去，所以有了解决方法二。这个bug的具体情况是：设置了动态路由之后，不同的用户登录之后显示了不同的侧边栏，在侧边栏点击菜单，渲染对应路由页面没有任何问题，但是在。（这种情况只出现在动态路由上，静态路由刷新没问题）。
vue-router动态路由刷新页面报404问题
06-23 3810
请注意：404 page must be placed at the end !!!404页面一定要放在路由的最后面，否则就会引起出错，包括动态添加路由的时候，也要放在最后面。如果是动态路由，在router下的index.js中定义一个error404路由变量， 然后在动态路由处引入：// 在这里将用户路由添加到动态路由最后之后，404路由就不是最后了，会引起刷新404问题router.addRoutes([...routes, error404])...
vue-cli3使用vue-router 使用动态路由，在刷新页面时报错
weixin_30415801的博客
08-02 1082
刚发现的一个问题，在使用vue-cli3创建项目之后，使用动=动态路由，demo: { path: '/aa/:id', name: 'aa', component: aa }, 编程式路由： this.$router.push({name:'aa',params:{id:1}}); 页面跳转成功，参数也可以获取到，但是...
vue动态添加路由，跳转页面时，页面报错路由重复： [vue-router] Duplicate named routes definition: {
z1712636234的博客
05-28 1万+
之前用了一个vue-element-admin做了一个小项目，里面用到了动态添加路由，动态展示侧边栏， 当我切换页面时，控制台总是警告提示路由重复，连续跳转几次页面后，控制台就被这些警告占满了， vue动态添加路由，跳转页面时，页面报错路由重复： 于是处理一下 原因addRoutes 方法仅仅是帮你注入新的路由，并没有帮你剔除原有的其它路由！ 我们先看一下原来代码 路由拦截器中的代码： permission.js: router.beforeEach((to, from, nex.
vue-router如何进行路由的动态添加
sunqy1995的博客
07-27 2万+
安装 npm install vue-router –save 使用 需要在进行页面切换的地方添加* *进行页面的切换。 1.页面路由跳转 //页面中使用下面语句代替a标签实现跳转，在写完标签后还需要在router中写下以下语句 <router-link to="/foo">Go to Foo</router-link&g
vue中 做权限管理 使用router.addRoutes()动态添加路由以及解决刷新失效，跳转后刷新失效问题
qq_31906983的博客
04-01 2万+
最近在公司做知识储备，有个权限的问题干扰了我2天，今天终于把他理顺了！！！ 一、需求明确 我想做的是后台管理系统的权限管理，（所有的数据都是使用mockJs模拟得来），登录的时候，发送表单验证，验证成功后，后台返回权限列表，权限不同，返回的列表不同，拿到权限列表后，把权限列表渲染出来在页面侧边栏上。 二、注意点 （1） 前端提前设置静态的权限列表，通常只包括页面公共的部分，比如...
vuex页面刷新刷新store解决方案
weixin_45217911的博客
08-28 1294
import http from "../../common/public"; const sysConfig = require("../../../config/sysConfig"); const apiUrl = sysConfig.xcApiUrlPre; const state = { manager: JSON.parse(localStorage.getItem("managerStore")) || false }; const mutations = { FLAG_DEVIC
vue-router 动态路由 key 报错
qq_37672347的博客
10-08 635
错误描述： 解决办法： 或者：
vue 解决addRoutes动态添加路由后刷新失效问题(跳转“404”页面)
JC.Lin的博客
12-21 2万+
这篇文章主要介绍了vue 解决addRoutes动态添加路由后刷新失效问题，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 前言 某些场景下我们需要利用addRoutes动态添加路由，但是刷新后就会失效，前段时间项目里刚好遇到了这个应用场景，所以就花时间研究了一下，做下分享跟记录，说的不对的地方，请大家指正。 应用场景：用户a登录进系统，用户挑选店铺后跳转到店铺详情首页，进入到动态...
vue 设置没有页面权限时回到首页
最新发布
11-05
在Vue.js中，如果你想要设置用户没有特定页面权限时返回到首页，你可以通过组件内的导航守卫（vue-router 的 `beforeEach` 或者 `asyncBeforeEnter`）来实现。首先确保已经安装并配置了vue-router。 1. 首先，在路由文件中，给每个需要权限控制的路由添加一个meta属性，定义一个名为`permission`的字段，例如： ```javascript { path: '/private-page', component: PrivateComponent, meta: { permission: 'admin' } } ``` 2. 然后在全局的导航守卫中检查用户的权限，如果没有权限，则重定向到首页（如`/`）： ```javascript import Vue from 'vue' import Router from 'vue-router' const router = new Router() router.beforeEach((to, from, next) => { if (to.meta.permission && !getUserPermission(to.meta.permission)) { // 用户没有权限，跳转回首页 next(`/`) } else { next() // 如果有权限，继续加载路由 } }) // 假设getUserPermission是一个获取用户当前权限的方法 function getUserPermission(permission) { // 这里模拟从服务器或本地存储获取用户权限的逻辑 return localStorage.getItem('userPermission') === permission; } export default router ``` 在这个例子中，如果`getUserPermission`返回false，说明用户没有访问`private-page`所需的权限，就会自动重定向到首页。记得在实际应用中替换`getUserPermission`为你实际的权限判断逻辑。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值