vue 后台获取菜单 动态加载数据后 点击菜单报404

Question

获取的数据
[
{
"id":1,
"parentId":0,
"parentIds":"0",
"name":"Article",
"sort":1,
"href":"/article",
"target":"/Layout",
"icon":"form",
"isShow":"1",
"permission":"",
"createBy":1,
"createDate":null,
"updateBy":null,
"updateDate":null,
"remarks":"文章管理",
"delFlay":"0",
"children":[
{
"id":2,
"parentId":1,
"parentIds":"1",
"name":"AddArticle",
"sort":1,
"href":"/addArticle",
"target":"/article/AddArticle",
"icon":"icon-shouye",
"isShow":"1",
"permission":"",
"createBy":1,
"createDate":null,
"updateBy":null,
"updateDate":null,
"remarks":"添加文章",
"delFlay":"0",
"children":[]
},
{
"id":3,
"parentId":1,
"parentIds":"1",
"name":"ListArticle",
"sort":2,
"href":"/ListArticle",
"target":"/article/ListArticle",
"icon":"icon-shouye",
"isShow":"1",
"permission":"",
"createBy":1,
"createDate":null,
"updateBy":null,
"updateDate":null,
"remarks":"文章列表",
"delFlay":"0",
"children":[]
}
]
},
{
"id":4,
"parentId":0,
"parentIds":"0",
"name":"SysOut",
"sort":1,
"href":"/SysOut",
"target":"/Layout",
"icon":"form",
"isShow":"1",
"permission":"",
"createBy":1,
"createDate":null,
"updateBy":null,
"updateDate":null,
"remarks":"系统管理",
"delFlay":"0",
"children":[]
}
]
vue
importrouterfrom'./router'
importstorefrom'./store'
import{Message}from'element-ui'
importNProgressfrom'nprogress'//progressbar
import'nprogress/nprogress.css'//progressbarstyle
import{getToken}from'@/utils/auth'//gettokenfromcookie
importgetPageTitlefrom'@/utils/get-page-title'
//importcomponentsMapfrom'./router/components'
NProgress.configure({showSpinner:false})//NProgressConfiguration
constwhiteList=['/login']//noredirectwhitelist
router.beforeEach(async(to,from,next)=>{
//startprogressbar
NProgress.start()
//setpagetitle
document.title=getPageTitle(to.meta.title)
//determinewhethertheuserhasloggedin
consthasToken=getToken()
if(hasToken){
if(to.path==='/login'){
//ifisloggedin,redirecttothehomepage
next({path:'/'})
NProgress.done()
}else{
consthasRoles=store.getters.roles&&store.getters.roles.length>0
if(hasRoles){
next()
}else{
try{
constroles=['editor']
awaitstore.dispatch('user/getMenu').then(res=>{
//console.log(res)
initMenu(router,res.list)
store.dispatch('user/setRole',roles)
next()
})
//next({...to,replace:true})
}catch(error){
awaitstore.dispatch('resetToken')
Message.error(error||'HasError')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
}
}else{
/*hasnotoken*/
//console.log('token')
if(whiteList.indexOf(to.path)!==-1){
//inthefreeloginwhitelist,godirectly
next()
}else{
//otherpagesthatdonothavepermissiontoaccessareredirectedtotheloginpage.
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})
router.afterEach(()=>{
//finishprogressbar
NProgress.done()
})
exportconstinitMenu=(router,menu)=>{
if(menu.length===0){
return
}
constmenus=formatRoutes(menu)
//最后添加
constunfound={path:'*',redirect:'/404',hidden:true}
menus.push(unfound)
//router.options.routes=menus
router.addRoutes(menus)
//router.options.routes=menus
//router.push(menus)
constinitialRoutes=router.options.routes.concat(menus)
store.dispatch('user/setMenu',initialRoutes)
}
exportconstformatRoutes=(aMenu)=>{
constaRouter=[]
aMenu.forEach(oMenu=>{
const{
href,
name,
target,
parentId,
icon,
remarks
}=oMenu
letchildren=oMenu.children
if(children&&childreninstanceofArray){
children=formatRoutes(children)
}
constoRouter={
path:href,
redirect:href+'/page',
component:(resolve)=>{
if(parentId===0){
require(['@/layout/index'],resolve)
return
}
require([`@/views${target}`],resolve)
},
name:name,
meta:{
title:remarks,
icon:icon
},
children:children
}
aRouter.push(oRouter)
})
//router.potions.routers.push(aRouter)
returnaRouter
}
点击生成的菜单就会跳到404

Answer 1

1、循环添加栏目到路由menus.forEach(e=>{router.options.routes.push(e)})2、redirect属性注解掉constoRouter={path:href,//redirect:href+'/page',//component:getViews(target),component:resolve=>{if(parentId===0){require(['@/layout'],resolve)returnfalse}//require([`@/views${target}`],resolve)require([`@/views`+target],resolve)},name:name,meta:{title:remarks,icon:icon},children:children}

Answer 2

路由的配置是在项目初始化（main.js）newVue()的时候就注册完成的，你后续使用方法配置并不会重新去注册路由配置，你能动态生成菜单，匹配路由，但路由页面不行