问题描述：在二级页面点击按钮，打开新的标签页
实现：
在router目录下的index.js文件添加对应组件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | { path: '/offices', component: <strong>'Layout'</strong><strong>,</strong> hidden: true, redirect: 'noRedirect', permission: 'sys:office:launch', meta: { title: '办公管理',roles: ['sys:office'] }, children: [ { path: '/flows', component: <strong>'/office/launch/flows'</strong><strong>,</strong> name: 'flows', hidden: true, meta: { title: '转正', activeMenu: '/office/launch' } }, ] } |
说明：上述黄色标记部分代码和以外自定义的component不一样，主要原因是自定义路由解析方法所致
修改store目录下permission.js
以下是之前定义的方法，该方法主要是生成从后端返回来的对应菜单的路由信息
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 | export function filterAsyncRoutes(routes, roles) { const res = [] routes.forEach(route => { const tmp = { ...route } if (hasPermission(roles, tmp)) { // 获取组件 const component = tmp.component // 判断该路由使用组件 if(route.component){ // 判断是否是根组件 if(component === 'Layout'){ tmp.component = Layout tmp.redirect = 'noRedirect' }else{ // 获取对应的具体组件信息 tmp.component = (resolve) => require([`@/views${component}`],resolve) } } // 判断是否有子菜单 if(tmp.children){ const child = tmp.children child.forEach(e => { e.path = tmp.path + e.path }) tmp.children = filterAsyncRoutes(tmp.children, roles) } res.push(tmp) } }) return res} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | const actions = { // 动态生成路由 generateRoutes({ commit }, roles) { return new Promise((resolve,reject) => { getMenuList().then(res=>{ let accessedRoutes;//存放对应权限的路由信息 //如果状态码为200，则表示成功 if(res.code === 200){ accessedRoutes = filterAsyncRoutes(res.data, roles) } //将路由信息保存到store中 commit("SET_ROUTES",accessedRoutes); resolve(accessedRoutes); }).catch(error=>{ reject(error); }); }) }} |
修改之后的方法
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 | export function filterAsyncRoutes(routes, roles, <strong>type = false</strong>) { const res = [] routes.forEach(route => { const tmp = { ...route } if (hasPermission(roles, tmp)) { // 获取组件 const component = tmp.component // 判断该路由使用组件 if(route.component){ // 判断是否是根组件 if(component === 'Layout'){ tmp.component = Layout tmp.redirect = 'noRedirect' }else{ // 获取对应的具体组件信息 tmp.component = (resolve) => require([`@/views${component}`],resolve) } } // 判断是否有子菜单 if(tmp.children){ const child = tmp.children child.forEach(e => { e.path = tmp.path + e.path }) tmp.children = filterAsyncRoutes(tmp.children, roles, false) } if(type && roles.includes(tmp.permission) || tmp.permission === 'all'){ res.push(tmp) }else if(!type){ res.push(tmp) } } }) return res} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | const actions = { // 动态生成路由 generateRoutes({ commit }, roles) { return new Promise((resolve,reject) => { getMenuList().then(res=>{ let accessedRoutes;//存放对应权限的路由信息 //如果状态码为200，则表示成功 if(res.code === 200){ accessedRoutes = filterAsyncRoutes(res.data, roles, false) // asyncRoutes 该参数就是上面添加的路由信息 accessedRoutes = accessedRoutes.concat(filterAsyncRoutes(asyncRoutes,roles,true)) } //将路由信息保存到store中 commit("SET_ROUTES",accessedRoutes); resolve(accessedRoutes); }).catch(error=>{ reject(error); }); }) }} |
黄色部分就是新增部分
修改面包屑和标签名
1 | title: view.query && view.query.metaTitle?view.query.metaTitle:(view.meta.title || 'no-name') |
