1. 開いたページがサイドバーとトップバーに包まれていない
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"
}
}
]
},
2. 新しいウィンドウを開きます (_blank)
上記のコードと同様に、新しいウィンドウを開くためのコントロール属性を追加しました。target: true,
それを達成するには、まだ 1 か所を変更する必要があります。\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>
3. 最終的な効果
私がクリックすると、フレームに拘束されることなく、新しいページ全体が新しいウィンドウで開きます。
この問題が発生し、echarts の解決策を知る必要がある場合は、private v を押してください。
Web フロントエンド開発、面接、フロントエンド学習ルートで問題がある場合は、V: imqdcnn を追加してください。無料で質問に回答し、長年業界に深く携わってきた技術専門家がバグの解決を支援します。
優秀なWEBフロントエンド開発エンジニアになってください！