Cómo hacer que la url abra la página de enrutamiento en una página nueva y se separe del shell de vue-admin-template, es decir, no envuelto en la barra lateral y la barra superior

1. La página abierta no está envuelta en la barra lateral y la barra superior

En la página recién creada usando vue-admin-template, las páginas abiertas están todas en el área de contenido del marco.

Pero si necesito hacer clic en un enlace a la izquierda, con la esperanza de abrirlo en una página nueva sin estar limitado por el marco, ¿qué debo hacer?

Para lograr esto, necesitamos saber por qué el enrutamiento solo se abre en el área de contenido.Veamos el router.jscódigo escrito en el archivo de enrutamiento:

import Layout from '../views/layout/Layout'

export const asyncRouterMap = [
{
    
    
        path: '/dashboard',
        name: 'dashboard',
        component: Layout, //这里约定了框架
        redirect: {
    
     name: 'index' },
        meta: {
    
     title: '首页', icon: 'icon_shouye', isHomePage: false },
        children: [
            {
    
    
                path: 'index',
                name: 'index',
                component: () => import('@/views/dashboard/index'),
                meta: {
    
    
                    title: '首页',
                    hiddenNode: true,
                    icon: 'icon_shouye'
                }
            }
        ]
    },
]

El código anterior, component: Layout, este es en realidad un componente de marco, que restringe nuestra página para que solo se abra en este marco.

Para abrir en una ventana nueva sin estar atados, podemos crear una nosotros mismos layout, por ejemplo:

<template>
  <!-- 打开一级菜单，不包含侧边栏、顶栏、尾部的空白模板 -->
  <div class="blank-layout">
    <!-- 在这里放置子菜单内容 -->
    <router-view></router-view>
  </div>
</template>

<style scoped></style>

<script>
export default {
  name: "BlankLayout"
};
</script>

Luego router.jsimpórtalo y escribe la siguiente configuración:

{
    
    
    path: "/Visualization",
    name: "Visualization",
    component: BlankLayout, //在新空白框架中载入url
    redirect: {
    
     name: "Visualization2" }, //在该控件中跳转到该组件
    meta: {
    
     title: "可视化大屏", isHomePage: false },
    children: [
      {
    
    
        path: "",
        name: "Visualization2",//实际要打开的组件，即访问/Visualization其实是对应的该组件
        target: true, //让菜单在新窗口打开，这个需要修改sidebar的配置
        component: () => import("@/views/Visualization/index"),
        meta: {
    
    
          title: "可视化大屏",
          hiddenNode: true,
          target: "_blank",
          icon: "icon_anjian"
        }
      }
    ]
  },

2. Abrir una nueva ventana (_blank)

Como en el código anterior, agregué un atributo de control para abrir una nueva ventana:target: true,

Todavía necesita modificar un lugar para lograrlo, encuentre\src\views\layout\components\Sidebar\SidebarItem.vue

Agregue los siguientes atributos en <router-link: :target="onlyOneChild.target == true ? '_blank' : ''".

Código completo:

 <div v-if="!item.hidden && item.children" class="menu-wrapper">
    <router-link v-if="hasOneShowingChild(item.children) && !onlyOneChild.children && !item.alwaysShow" :to="resolvePath(onlyOneChild.path)" :target="onlyOneChild.target == true ? '_blank' : ''">
      <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
        <svg-icon v-if="onlyOneChild.meta && onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon" class="iconClass"></svg-icon>
        <span v-if="onlyOneChild.meta && onlyOneChild.meta.title" slot="title">{
   
   { onlyOneChild.meta.title }}</span>
      </el-menu-item>
    </router-link>
    ....
</div>

3. El efecto final

Cuando hago clic, abre una página completamente nueva en una ventana nueva sin estar limitado por el marco.

Si también te encuentras con este problema y necesitas saber la solución de echarts, puedes presionar privado v.

Si tiene dificultades en el desarrollo web front-end, entrevistas y rutas de aprendizaje front-end, puede agregarme V: imqdcnn. Responda preguntas de forma gratuita, y los expertos técnicos que han estado involucrados en la industria durante muchos años lo ayudarán a resolver errores.

¡Deseo que puedas convertirte en un excelente ingeniero de desarrollo front-end WEB!