如何让url在新页面打开路由页面,并脱离vue-admin-template的壳,即不包裹在侧边栏和顶栏中

简介: 如何让url在新页面打开路由页面,并脱离vue-admin-template的壳,即不包裹在侧边栏和顶栏中

一、打开的页面不包裹在侧边栏和顶栏中

在使用vue-admin-template新建的页面中,打开的页面都是在框架内的内容区。

但假如我需要在左侧点击一个链接,希望能不受框架束缚,在全新页面中打开,该怎么做呢?

要实现这一点,其实就要知道,路由为什么只会在内容区打开,我们先来看看写在路由文件router.js中的这段代码:

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

以上代码,component: Layout, 这个其实就是框架组件,就是它束缚了我们的页面只能在该框架中打开。

要想在全新的窗口打开,不受束缚,我们可以自行创建一个layout,比如:

<template>
  <!-- 打开一级菜单,不包含侧边栏、顶栏、尾部的空白模板 -->
  <div class="blank-layout">
    <!-- 在这里放置子菜单内容 -->
    <router-view></router-view>
  </div>
</template>
<style scoped></style>
<script>
export default {
  name: "BlankLayout"
};
</script>

然后在router.js中导入,并且写如下配置即可:

{
    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"
        }
      }
    ]
  },

二、新窗口打开(_blank)

如上代码,我新添加了一个新窗口打开的控制属性:target: true,

还需要修改一个地方即可实现,找到\src\views\layout\components\Sidebar\SidebarItem.vue

<router-link中添加如下属性::target="onlyOneChild.target == true ? '_blank' : ''"即可。

完整代码:

<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>

三、最终效果

当我点击时,他会在新窗口打开一个全新的页面,而不会受到框架约束。

如果你也遇到了该问题,且需了解echarts解决方案,可按下方私我v.

如果你在web前端开发、面试、前端学习路线有困难可以加我V:imqdcnn。免费答疑,行业深潜多年的技术牛人帮你解决bug。

祝你能成为一名优秀的WEB前端开发工程师!

相关文章
|
3月前
|
Web App开发 缓存 前端开发
【面试题】从输入 URL 到页面显示,这中间发生了什么?
【面试题】从输入 URL 到页面显示,这中间发生了什么?
|
7月前
|
移动开发 小程序
小程序-uniapp:URL Link / 适用于在移动端 从短信、邮件、微信外网页 等场景打开小程序任意页面
小程序-uniapp:URL Link / 适用于在移动端 从短信、邮件、微信外网页 等场景打开小程序任意页面
253 0
|
6月前
|
小程序 前端开发 PHP
PHP实现生成小程序二维码带参数进入指定页面、小程序URL scheme实现携带数据跳转小程序
PHP实现生成小程序二维码带参数进入指定页面、小程序URL scheme实现携带数据跳转小程序
|
17天前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
4月前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
1月前
|
Web App开发 缓存 网络协议
|
6月前
|
缓存 前端开发 JavaScript
【前端用法】jquery获取当前页面的URL信息
【前端用法】jquery获取当前页面的URL信息
52 0
|
3月前
|
前端开发
vue-element-admin最新版4.4实现多个url路由匹配到一个路径时,左侧菜单保持高亮状态
vue-element-admin最新版4.4实现多个url路由匹配到一个路径时,左侧菜单保持高亮状态
29 0
|
3月前
|
缓存 网络协议 前端开发
面试题:浏览器中输入URL返回页面过程?
面试题:浏览器中输入URL返回页面过程?
90 0
|
4月前
|
缓存 网络协议 前端开发
一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么
一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么
26 0

热门文章

最新文章