问题描述：在二级页面点击按钮，打开新的标签页
实现：
在router目录下的index.js文件添加对应组件
{
path: '/offices',
component: 'Layout',
hidden: true,
redirect: 'noRedirect',
permission: 'sys:office:launch',
meta: { title: '办公管理',roles: ['sys:office'] },
children: [
{
path: '/flows',
component: '/office/launch/flows',
name: 'flows',
hidden: true,
meta: { title: '转正', activeMenu: '/office/launch' }
},
]
}
说明：上述黄色标记部分代码和以外自定义的component不一样，主要原因是自定义路由解析方法所致
修改store目录下permission.js
以下是之前定义的方法，该方法主要是生成从后端返回来的对应菜单的路由信息
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
}
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);
});
})
}
}
修改之后的方法
export function filterAsyncRoutes(routes, roles, type = false) {
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
}
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);
});
})
}
}
黄色部分就是新增部分
修改面包屑和标签名
title: view.query && view.query.metaTitle?view.query.metaTitle:(view.meta.title || 'no-name')
