关于vueelementadmin中的router问题

作者：马婷婷0514_761 | 来源：互联网 | 2023-09-25 15:49

在router.beforeEach中添加身份验证条件之后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

router.beforeEach((to, from, next) => {

NProgress.start() // start progress bar

if (getToken()) {

// determine if there has token

/* has token*/

if (to.path === '/login') {

next({ path: '/' })

NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it

} else {

if(store.getters.userRole == 1 || store.getters.userRole == 2){

router.addRoutes(asyncRoutes) // 动态添加可访问路由表

// console.log(router)

// console.log(to)

next({ ...to, replace: true })

// next({ path: '/' })

}else{

router.addRoutes(constantRoutes) // 动态添加可访问路由表

next({ ...to, replace: true })

}

}

} else {

// alert('获取失败')

/* has no token*/

if (whiteList.indexOf(to.path) !== -1) {

// 在免登录白名单，直接进入

next()

} else {

next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页

NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it

}

}

})

浏览器报错内存泄漏，Maximum call stack size exceeded

下面是我的路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

export const cOnstantRoutes= [

{

path: '/redirect',

component: Layout,

hidden: true,

children: [

{

path: '/redirect/:path*',

component: () => import('@/views/redirect/index')

}

]

},

{

path: '/login',

component: () => import('@/views/login/index'),

hidden: true

},

{

path: '/auth-redirect',

component: () => import('@/views/login/authredirect'),

hidden: true

},

{

path: '/404',

component: () => import('@/views/errorPage/404'),

hidden: true

},

{

path: '/401',

component: () => import('@/views/errorPage/401'),

hidden: true

},

{

path: '',

component: Layout,

redirect: 'dashboard',

children: [

{

path: 'dashboard',

component: () => import('@/views/dashboard/index'),

name: 'Dashboard',

meta: { title: 'dashboard', icon: 'dashboard', noCache: true, affix: true }

}

]

},

{

path: 'dashboard',

component: () => import('@/views/dashboard/index'),

// name: 'Dashboard',

meta: { title: 'dashboard', icon: 'dashboard', noCache: true, affix: true }

}

// {

// path: '/documentation',

// component: Layout,

// children: [

// {

// path: 'index',

// component: () => import('@/views/documentation/index'),

// name: 'Documentation',

// meta: { title: 'documentation', icon: 'documentation', affix: true }

// }

// ]

// },

// {

// path: '/guide',

// component: Layout,

// redirect: '/guide/index',

// children: [

// {

// path: 'index',

// component: () => import('@/views/guide/index'),

// name: 'Guide',

// meta: { title: 'guide', icon: 'guide', noCache: true }

// }

// ]

// }

]

export default new Router({

// mode: 'history', // require service support

scrollBehavior: () => ({ y: 0 }),

routes: constantRoutes

})

export const asyncRoutes = [

// 初级系统不支持用户管理

// {

// path:'/users',

// component:Layout,

// children:[

// {

// path:'',

// component:() => import('@/views/users/users'),

// name:'users',

// meta: { title: 'users', icon: 'peoples', noCache: true }

// }

// ]

// },

// {

// path: '',

// component: Layout,

// redirect: 'dashboard',

// children: [

// {

// path: 'dashboard',

// component: () => import('@/views/dashboard/index'),

// name: 'Dashboard',

// meta: { title: 'dashboard', icon: 'dashboard', noCache: true, affix: true }

// }

// ]

// },

// {

// path: '/redirect',

// component: Layout,

// hidden: true,

// children: [

// {

// path: '/redirect/:path*',

// component: () => import('@/views/redirect/index')

// }

// ]

// },

{

path: '/aisle',

component: Layout,

children: [

{

path: '',

component: () => import('@/views/aisle/aisle'),

name: 'aisle',

meta: { title: 'aisle', icon: 'tree', noCache: true }

}

]

},

推荐阅读

export
Vue 页面状态管理与跨页面数据传递的有效策略

在 Vue 应用开发中，页面状态管理和跨页面数据传递是常见需求。本文将详细介绍 Vue Router 提供的两种有效方式，帮助开发者高效地实现页面间的数据交互与状态同步，同时分享一些最佳实践和注意事项。 ... [详细]

蜡笔小新 2024-11-08 12:45:14
replace
自然语言处理(NLP)——LDA模型:对电商购物评论进行情感分析

目录一、2020数学建模美赛C题简介需求评价内容提供数据二、解题思路三、LDA简介四、代码实现1.数据预处理1.1剔除无用信息1.1.1剔除掉不需要的列1.1.2找出无效评论并剔除 ... [详细]

蜡笔小新 2024-11-14 18:21:21
int
Android Studio SQLite 数据库增删改查简单（代码参考）

一个建表一个执行crud操作建表代码importandroid.content.Context;importandroid.database.sqlite.SQLiteDat ... [详细]

蜡笔小新 2024-11-14 11:01:49
const
Android 自定义 RecycleView 左滑上下分层示例代码

为了满足项目需求，需要在多个场景中实现左滑删除功能，并且后续可能在列表项中增加其他功能。虽然网络上有很多左滑删除的示例，但大多数封装不够完善。因此，我们尝试自己封装一个更加灵活和通用的解决方案。 ... [详细]

蜡笔小新 2024-11-13 17:43:59
int
SoundPool

如果应用程序经常播放密集、急促而又短暂的音效（如游戏音效）那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点：1)延时时间较长，且资源占用率高 ... [详细]

蜡笔小新 2024-11-13 16:47:19
object
Java 编程错误：对象无法转换为 long 类型

本文介绍了在 Java 编程中遇到的一个常见错误：对象无法转换为 long 类型，并提供了详细的解决方案。 ... [详细]

蜡笔小新 2024-11-13 10:57:24
replace
javascript分页类支持页码格式

前端时间因为项目需要，要对一个产品下所有的附属图片进行分页显示，没考虑ajax一张张请求，所以干脆一次性全部把图片out，然 ... [详细]

蜡笔小新 2024-11-12 14:58:57
range
Python 多进程编程：深入解析与实战技巧

在Python多进程编程中，`multiprocessing`模块是不可或缺的工具。本文详细探讨了该模块在多进程管理中的核心原理，并通过实际代码示例进行了深入分析。文章不仅总结了常见的多进程编程技巧，还提供了解决常见问题的实用方法，帮助读者更好地理解和应用多进程编程技术。 ... [详细]

蜡笔小新 2024-11-05 12:32:32
object
如何高效获取并管理社交媒体上的好友列表

本文探讨了如何在社交媒体平台上高效地获取和管理好友列表。通过分析当前流行的社交应用，如微信、Facebook等，提出了一系列实用的方法和技巧，帮助用户优化好友管理流程，提升社交体验。文章还介绍了相关工具和插件，以进一步简化操作步骤，确保用户能够快速、准确地管理和维护好友关系。 ... [详细]

蜡笔小新 2024-10-31 16:32:39
object
JavaScript面部交换代码及实现方法

本文详细介绍了如何使用JavaScript实现面部交换功能，包括基本原理和具体实现步骤。 ... [详细]

蜡笔小新 2024-11-14 15:54:06
int
JVM钩子函数的应用场景详解

本文详细介绍了JVM钩子函数的多种应用场景，包括正常关闭、异常关闭和强制关闭。通过具体示例和代码演示，帮助读者更好地理解和应用这一机制。适合对Java编程和JVM有一定基础的开发者阅读。 ... [详细]

蜡笔小新 2024-11-13 18:34:48
request
SpringMVC 入门指南：快速上手 Java Web 开发

本文将带你快速了解 SpringMVC 框架的基本使用方法，通过实现一个简单的 Controller 并在浏览器中访问，展示 SpringMVC 的强大与简便。 ... [详细]

蜡笔小新 2024-11-13 14:22:01
web
Spring – Bean Life Cycle

Spring – Bean Life Cycle ... [详细]

蜡笔小新 2024-11-13 13:24:40
int
Android 自定义加载对话框 CustomProgressDialog

本文介绍如何在 Android 中自定义加载对话框 CustomProgressDialog，包括自定义 View 类和 XML 布局文件的详细步骤。 ... [详细]

蜡笔小新 2024-11-12 21:51:00
replace
在GitHub上克隆vue-element-admin项目时遇到依赖安装错误

在 GitHub 上克隆 vue-element-admin 项目后，使用 `npm install` 安装依赖时遇到了未知的 Git 错误。具体错误信息为 `npm ERR! code 128`，提示命令执行失败。这可能是由于网络问题、Git 配置不正确或某些依赖包的仓库地址无效导致的。建议检查网络连接、更新 Git 版本并确保所有依赖项的 URL 正确无误。 ... [详细]

蜡笔小新 2024-11-04 17:01:47

马婷婷0514_761

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章