[vue3-element-admin] 有来框架 点击菜单新标签页打开路由

1. 配置路由选项

\src\router\index.ts

在此目录下配置好需要单独打开页面的路由信息，我配置了`/screen`和`/cockpit` 这两个路由信息

// 静态路由
export const constantRoutes: RouteRecordRaw[] = [
  {
    path: "/redirect",
    component: Layout,
    meta: { hidden: true },
    children: [
      {
        path: "/redirect/:path(.*)",
        component: () => import("@/views/redirect/index.vue"),
      },
    ],
  },

  {
    path: "/login",
    component: () => import("@/views/login/index.vue"),
    meta: { hidden: true },
  },
  {
    path: "/screen",
    component: () => import("@/views/screen/index.vue"),
    meta: { hidden: true },
  },
  {
    path: "/cockpit",
    component: () => import("@/views/personnel-analysis/children/Cockpit/index.vue"),
    meta: { hidden: true },
  },

  {
    path: "/",
    name: "/",
    component: Layout,
    redirect: "/dashboard",
    children: [
      {
        path: "dashboard",
        component: () => import("@/views/dashboard/index.vue"),
        name: "Dashboard", // 用于 keep-alive, 必须与SFC自动推导或者显示声明的组件name一致
        // https://cn.vuejs.org/guide/built-ins/keep-alive.html#include-exclude
        meta: {
          title: "dashboard",
          icon: "homepage",
          affix: true,
          keepAlive: true,
          alwaysShow: false,
        },
      },
      {
        path: "401",
        component: () => import("@/views/error-page/401.vue"),
        meta: { hidden: true },
      },
      {
        path: "404",
        component: () => import("@/views/error-page/404.vue"),
        meta: { hidden: true },
      },
    ],
  },
];

2. 修改菜单组件源码

\src\layout\components\Sidebar\components\SidebarMenuItem.vue
必须使用a标签进行路由跳转，否则会出现重定向错误

<template>
  <div v-if="!item.meta || !item.meta.hidden">
    <!-- 显示具有单个子路由的菜单项或没有子路由的父路由 -->
    <template
      v-if="
        hasOneShowingChild(item.children, item as RouteRecordRaw) &&
        (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
        !item.meta?.alwaysShow
      "
    >
      <!-- onlyOneChild包含了路由的信息，最外层的菜单onlyOneChild.path / onlyOneChild.name都有路径，如果是嵌套路由菜单onlyOneChild.name才有路径，不确定的话可以在title上渲染onlyOneChild的信息查看 -->
      <!-- 该判断用于大屏页面单独打开新页面跳转，切记，如果有多个判断条件要使用v-else-if进行判断，不然会重复渲染 -->
      <!-- 当路径是 /screen 时，使用 a 标签并保持哈希路径跳转 -->
      <!-- 跳转的菜单1 -->
      <a v-if="onlyOneChild.name == '/screen'" href="#/screen" target="_blank">
        <el-menu-item
          :index="'#/screen'"
          :class="{ 'submenu-title-noDropdown': !isNest }"
        >
          <SidebarMenuItemTitle
            :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
            :title="onlyOneChild.meta.title"
          />
        </el-menu-item>
      </a>

      <!-- 当路径是 /cockpit 时，使用 a 标签并保持哈希路径跳转 -->
      <!-- 跳转的菜单2 -->
      <a
        v-else-if="onlyOneChild.name == '/cockpit'"
        href="#/cockpit"
        target="_blank"
      >
        <el-menu-item
          :index="'#/cockpit'"
          :class="{ 'submenu-title-noDropdown': !isNest }"
        >
          <SidebarMenuItemTitle
            :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
            :title="onlyOneChild.meta.title"
          />
        </el-menu-item>
      </a>

      <!-- 其他路径继续使用 AppLink -->
      <AppLink v-else :to="resolvePath(onlyOneChild.path)">
        <el-menu-item
          :index="resolvePath(onlyOneChild.path)"
          :class="{ 'submenu-title-noDropdown': !isNest }"
        >
          <SidebarMenuItemTitle
            :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
            :title="onlyOneChild.meta.title"
          />
        </el-menu-item>
      </AppLink>
    </template>

    <!-- 显示具有多个子路由的父菜单项 -->
    <el-sub-menu v-else :index="resolvePath(item.path)" teleported>
      <template #title>
        <SidebarMenuItemTitle
          v-if="item.meta"
          :icon="item.meta && item.meta.icon"
          :title="item.meta.title"
        />
      </template>

      <SidebarMenuItem
        v-for="child in item.children"
        :key="child.path"
        :is-nest="true"
        :item="child"
        :base-path="resolvePath(child.path)"
      />
    </el-sub-menu>
  </div>
</template>

实现效果如下