How to make the url open the routing page in a new page, and break away from the vue-admin-template shell, that is, not wrapped in the sidebar and top bar

1. The opened page is not wrapped in the sidebar and top bar

In the newly created page using vue-admin-template, the opened pages are all in the content area of ​​the frame.

But if I need to click a link on the left, hoping to open it in a new page without being bound by the frame, what should I do?

To achieve this, we need to know why routing is only opened in the content area. Let’s take a look at the router.jscode written in the routing file:

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'
                }
            }
        ]
    },
]

The above code, component: Layout, this is actually a frame component, which restricts our page to only be opened in this frame.

To open in a new window without being bound, we can create one by ourselves layout, for example:

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

<style scoped></style>

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

Then router.jsimport it in and write the following configuration:

{
    
    
    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. Open a new window (_blank)

As in the code above, I added a control attribute for opening a new window:target: true,

You also need to modify one place to achieve it, find\src\views\layout\components\Sidebar\SidebarItem.vue

Add the following attributes in <router-link: :target="onlyOneChild.target == true ? '_blank' : ''".

Full code:

 <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. The final effect

When I click, he opens a whole new page in a new window without being constrained by the frame.

If you also encounter this problem and need to know the echarts solution, you can press private v.

If you have difficulties in web front-end development, interviews, and front-end learning routes, you can add me V: imqdcnn. Answer questions for free, and technical experts who have been deep in the industry for many years will help you solve bugs.

I wish you can become an excellent WEB front-end development engineer!