关于element-admin 404页路由跳转的问题

来源：5-5 项目结构分析

小学教师

2020-03-05

export const asyncRoutes = [
{ path: ‘*’, redirect: ‘/404’, hidden: true }
]

const createRouter = () => new Router({
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})

const router = createRouter()

export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}

老师你好，请教一下
创建路由的时候传入的是 constantRoutes，而 constantRoutes中并不包含404，404页是在asyncRoutes中的，asyncRoutes在路由中并没有引用啊，那么路由是怎么跳转到404页的呢？
还有：以下这段代码
const createRouter = () => new Router({
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
为什么不写成下面这样呢？而要将它写成一个函数呢
const createRouter = new Router({
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
export default constantRoutes

嘻嘻~谢谢老师，很困惑啊！

写回答

1回答

Sam

2020-03-07

好的，逐一解答哈，第一个问题，asyncRoutes是在permission.js中，路由全局守卫中加入路由表的，就是我们通常所说的动态路由，核心代码如下：

const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
router.addRoutes(accessRoutes)

这里调用了 vuex 中的一个 generateRoutes 方法，来完成动态路由的生成，这样做的目的是为了将路由和权限进行映射。

第二个问题，下面这种写法叫做函数柯里化：

const createRouter = () => new Router({
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

它的用途是并不立即执行函数，而是返回一个函数。这样做的目的通常是由于函数执行时有一些变量没有确定，需要根据执行环境确定。你上面的示例中，不用函数柯里化也是ok的

小学教师

谢谢老师哦。看到你后面的章节里有详细的解答了。

2020-03-11

共1条回复

Vue Element+Node.js开发企业通用管理后台系统

基于Element的中后台课程，一套中小型企业通用的后台管理系统

2829 学习 · 1714 问题

查看课程

相似问题

vue.config.js中没有proxy相关代码。不改Request URL会多一个vue-element-admin。

回答 2

重定向组件的作用

回答 1

路由不能跳转

回答 1

关于动态生成路由逻辑的问题

回答 1

vue-element-admin有中文官方文档吗？

回答 4

打开慕课网App查看更多内容