在不改变路由的状态下,直接在默认的二级菜单页面中打开新的浏览器标签页,在二级页面的创建状态created下使用window.resolve({path:‘/路径’})打开新的路径
二级菜单路由
import Layout from '@/layout'
export const routeGroup = {
Task: 'A', //任务
};
const TaskRoute = {
app: true,
group: routeGroup.Task,
hidden: false,
path: '/Task',
component: Layout,
redirect: 'Task',
children: [ {
hidden: true,
path: 'TaskOverView',
component: () => import('@/views/TaskOverView/index2'),
name: 'TaskOverView',
TitleValue: '概览',
meta: {
title: '概览',
MySqlPower: 'TaskOverView',
mark: '任务',
redirect: '/TaskOverView',
standalone: true
},
}]
export default TaskRoute
新标签页面路由
import Layout from '@/layout'
const IndependentRoute = [{
hidden: true,
path: '/TaskOverViewDetails',
name: 'TaskOverViewDetails',
meta: {
MySqlPower: 'TaskOverView',//角色访问权限
title: '概览',
},
component: () => import('@/views/TaskOverView/index')//新标签页路径,
}]
export default IndependentRoute
二级菜单页面创建状态时,打开新标签页面
import {mapState} from "vuex";
created() {
let RouterData = this.$router.resolve({
path: "/TaskOverViewDetails",
});
window.open(RouterData.href, "_blank");//隐藏传参信息上上篇有
this.handleTabRemove()
},
并且关闭默认打开的二级页面菜单,数字字典便利路由数组,将上一个路由进行删除,并且重定向到其他路由上
computed: {
...mapState({
visitedRoutes: (state) => state.tabsBar.visitedRoutes
}),
},
methods: {
async handleTabRemove(tabActive) {
const route = this.$route
const { visitedRoutes } = this
await this.$store.dispatch("delRoute",route);
if (this.isActive(route)) {
this.toLastTag(visitedRoutes, route);
}
},
isActive(route) {
return route.path === this.$route.path;
},
toLastTag(visitedRoutes, view) {
const latestView = visitedRoutes.slice(-1)[0];
if (latestView) {
this.$router.push(latestView);
} else {
this.$router.push("/重定向到的路由路径");
}
},
},