1.ネストされたルーティングを構成する【機能実現】
1. vue-router の公式ドキュメントを開き、ネストされたルーティング部分を見つけます
ページの変更されていない部分については外部ルートとして定義し、変更された部分については子でサブルートとして定義します
公式のサンプルコードは次のとおりです。
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})2. メイン ルートを作成します。ビュー フォルダーの下に Main.vue を作成します。
router フォルダ配下の index.js にメインルートを設定
①メインルーティングファイルの作成
②元のルートを入れ子ルートに書き換える【注意、サブルートは持ち込めない】
このとき App.vue のルーティング出口はメインルーティングを参照するため、メインルーティングの Main.vue ファイルにもサブルーティングのルーティング出口を設ける必要があります [サブルーティングは内部に表示されるため]メインルーティング]、Main.vue構成ルート出口を開きます
3.この時点でページにアクセスすると、下の図に示すように、ネストされたルーティング構成が完了します
2.UIを元にナビゲーションバーのレイアウトをデザインする【美しいスタイル】
1. UI ダイアグラムに従って、要素の公式 Web サイトに移動し、対応するコンテナー レイアウト コンテナーを見つけます。
このプロジェクトの UI スタイルは、左側のナビゲーション バー、トップ バー、および中央のコンテンツ メインに基づいて実装されています. 公式コードは次のとおりです。
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
</el-container>
</el-container>上記のコードを Main.vue メイン ルーティング ファイルに書き込み、元のサブルーティングの出口を <el-main> に書き込みます。
2. 左ナビゲーション バー コンポーネント CommonAside.vue を src フォルダーの下の components フォルダーに登録し、要素の公式 Web サイトでスタイルを選択し、公式 Web サイト ドキュメントのパッケージ プロパティに従って変更します。プロジェクトを次の図に示します。
公式サイトの元のコードは次のとおりです。
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">导航一</span>
</template>
<el-menu-item-group>
<span slot="title">分组一</span>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<span slot="title">选项4</span>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>上記のコードを CommonAside.vue ファイルに書き換えます。主に第 1 レベル メニューと第 2 レベル メニューの記述方法に注意してください (書き換え後の具体的なコードは後で表示します)。
3. メイン ルーティング ファイル Main.vue に左側のナビゲーション バーを導入して、CommonAside.vue コンポーネントの導入、登録、および使用を実現します。
4. 第 1 レベルのメニューと第 2 レベルのメニューを記述するための詳細な指示を提供します。
4.1 スクリプトのデータ部分に第 1 レベル メニューと第 2 レベル メニューのデータを記述して、後続のデータ レンダリングのデータ ベースを提供し、ナビゲーション バー データを格納する配列 menuData を定義します。
①レベル１メニューデータ書き込み方法
//一级菜单写法
{
path: '/teachingmanage',
name: 'teachingmanage',
label: '教研管理',
icon: 's-home',
url: 'TeachingManage/TeachingManage'
},②レベル２メニューデータ書き込み方法
//二级菜单写法
{
label: '研修管理',
icon: 's-home',
children: [
{
path: '/coursecenter',
name: 'coursecenter',
label: '课程中心',
icon: 's-home',
url: 'StudyManage/CourseCenter'
},
{
path: '/questionbank',
name: 'questionbank',
label: '题库管理',
icon: 's-home',
url: 'StudyManage/QuestionBank'
},
]
},4.2 スクリプトの計算部分にサブメニューの有無を判断する方法を定義し、以降のページ描画データの土台を作る
①サブメニューがなく、アイテムの子が存在しないと判断し、結果を返す
noChildren() {
return this.menuData.filter(item => !item.children)
},②サブメニューがあればサブメニューなしの判定を反転させるだけ
hasChildren() {
return this.menuData.filter(item => item.children)
}4.3 ナビゲーションバーデータの表示を実現するためにページ上にデータをレンダリングする
①レベル 1 メニュー ページのレンダリング データ コード:
<!-- 一级菜单 -->
<!-- index用于确定选中的菜单项，是唯一标识 -->
<!-- v-bind:(简写为:，用于属性绑定) -->
<el-menu-item @click="clickMenu(item)" v-for="item in noChildren" :key="item.name" :index="item.name">
<!-- `el-icon-${item.icon}`与data中的数据绑定，实现动态拼接 -->
<i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{
{ item.label }}</span>
</el-menu-item>② セカンダリ メニュー ページのレンダリング データ コード:
<!-- 二级菜单 -->
<el-submenu v-for=" item in hasChildren" :key="item.label" index="item.label">
<!-- slot表示插槽 -->
<template slot="title">
<i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{
{ item.label }}</span>
</template>
<!-- 对子菜单进行渲染 -->
<el-menu-item-group v-for="subItem in item.children" :key="subItem.path">
<el-menu-item @click="clickMenu(subItem)" :index="subItem.path">{
{ subItem.label }}</el-menu-item>
</el-menu-item-group>
</el-submenu>4.4 CommonAside.vue ファイルの完全なコードは次のとおりです。
<template>
<div>
<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
:collapse="isCollapse">
<!-- 一级菜单 -->
<!-- index用于确定选中的菜单项，是唯一标识 -->
<!-- v-bind:(简写为:，用于属性绑定) -->
<el-menu-item @click="clickMenu(item)" v-for="item in noChildren" :key="item.name" :index="item.name">
<!-- `el-icon-${item.icon}`与data中的数据绑定，实现动态拼接 -->
<i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{
{ item.label }}</span>
</el-menu-item>
<!-- 二级菜单 -->
<el-submenu v-for=" item in hasChildren" :key="item.label" index="item.label">
<!-- slot表示插槽 -->
<template slot="title">
<i :class="`el-icon-${item.icon}`"></i>
<span slot="title">{
{ item.label }}</span>
</template>
<!-- 对子菜单进行渲染 -->
<el-menu-item-group v-for="subItem in item.children" :key="subItem.path">
<el-menu-item @click="clickMenu(subItem)" :index="subItem.path">{
{ subItem.label }}</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</div>
</template>
<script>
export default {
data() {
return {
//控制导航栏为展开模式
isCollapse: false,
//存放导航栏数据
menuData: [
//一级菜单写法
{
path: '/teachingmanage',
name: 'teachingmanage',
label: '教研管理',
icon: 's-home',
url: 'TeachingManage/TeachingManage'
},
{
path: '/scientificmanage',
name: 'scientificmanage',
label: '科研管理',
icon: 's-home',
url: 'ScientificManage/ScientificManage'
},
//二级菜单写法
{
label: '研修管理',
icon: 's-home',
children: [
{
path: '/coursecenter',
name: 'coursecenter',
label: '课程中心',
icon: 's-home',
url: 'StudyManage/CourseCenter'
},
{
path: '/questionbank',
name: 'questionbank',
label: '题库管理',
icon: 's-home',
url: 'StudyManage/QuestionBank'
},
{
path: '/examinationpaper',
name: 'examinationpaper',
label: '试卷管理',
icon: 's-home',
url: 'StudyManage/ExaminationPaperManage'
},
{
path: '/trainingmanage',
name: 'trainingmanage',
label: '培训管理',
icon: 's-home',
url: 'StudyManage/TrainingManage'
},
]
},
//一级菜单写法
{
path: '/evalutionmanage',
name: 'evalutionmanage',
label: '评价管理',
icon: 's-home',
url: 'EvalutionManage/EvalutionManage'
},
{
path: '/supervisioncenter',
name: 'supervisioncenter',
label: '监管中心',
icon: 's-home',
url: 'SupervisionCenter/SupervisionCenter'
},
{
path: '/usermanage',
name: 'usermanage',
label: '用户管理',
icon: 's-home',
url: 'UserManage/UserManage'
},
]
}
},
methods: {
handleOpen() {
},
handleClose() {
}
},
computed: {
//没有子菜单,判断item的children不存在，并将结果return
noChildren() {
return this.menuData.filter(item => !item.children)
},
//有子菜单，与没有子菜单的判断取反即可
hasChildren() {
return this.menuData.filter(item => item.children)
}
}
}
</script>プロジェクトを実行し、ページを開き、ナビゲーション バーのメニュー データが正常にレンダリングされていることを確認します [注: el-main のコンテンツを説明するために、次の図が表示されたときに URL アドレス バーにホームが入力されています。 ]
ナビゲーション バー スタイルの特定の変更については、次のセクションで紹介します。