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":[]}]vueimportrouterfrom'./router'importstorefrom'./store'import{Message}from'element-ui'importNProgressfrom'nprogress'//progressbarimport'nprogress/nprogress.css'//progressbarstyleimport{getToken}from'@/utils/auth'//gettokenfromcookieimportgetPageTitlefrom'@/utils/get-page-title'//importcomponentsMapfrom'./router/components'NProgress.configure({showSpinner:false})//NProgressConfigurationconstwhiteList=['/login']//noredirectwhitelistrouter.beforeEach(async(to,from,next)=>{//startprogressbarNProgress.start()//setpagetitledocument.title=getPageTitle(to.meta.title)//determinewhethertheuserhasloggedinconsthasToken=getToken()if(hasToken){if(to.path==='/login'){//ifisloggedin,redirecttothehomepagenext({path:'/'})NProgress.done()}else{consthasRoles=store.getters.roles&&store.getters.roles.length>0if(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,godirectlynext()}else{//otherpagesthatdonothavepermissiontoaccessareredirectedtotheloginpage.next(`/login?redirect=${to.path}`)NProgress.done()}}})router.afterEach(()=>{//finishprogressbarNProgress.done()})exportconstinitMenu=(router,menu)=>{if(menu.length===0){return}constmenus=formatRoutes(menu)//最后添加constunfound={path:'*',redirect:'/404',hidden:true}menus.push(unfound)//router.options.routes=menusrouter.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}=oMenuletchildren=oMenu.childrenif(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()的时候就注册完成的，你后续使用方法配置并不会重新去注册路由配置，你能动态生成菜单，匹配路由，但路由页面不行