ネストされたルーティングは、サブルーティングとも呼ばれ、通常、実際のアプリケーションではネストされたコンポーネントの複数のレイヤーで構成されます。同様に、URL内の動的な道路景観の各セグメントも、特定の構造に従ってネストされたコンポーネントの各レイヤーに対応しています。たとえば、Vueの公式Webサイトチュートリアルを見てみましょう。
左側の項目をクリックすると、左側と上部の2つのナビゲーションバーが変更されないことがわかります。変更されたのは右側の領域だけです。ラベルにマウスを置くと、ルートであることがわかります。または、彼はサブルーターです。次に、このサブルーティング機能を実装する方法について説明しましょう。
ElemetUIに移動して1つを選択しましょう。私は次のコードを選択しました
。対応するコードは次のとおりです。Main.vueファイルに書き込むことができます(結局、私は少し変更しましたが、学習しているだけで、それほど使用する必要はありません) 。
<template>
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<!-- 菜单默认打开第一个 -->
<el-menu :default-openeds="['1']">
<!-- 索引表示他是左边导航栏的第几个 -->
<el-submenu index="1">
<!-- 这个是大的导航栏 -->
<template slot="title"><i class="el-icon-message"></i>学籍管理</template>
<!-- 这是大导航里面展开的小列表 -->
<el-menu-item-group>
<el-menu-item index="1-1">
<!-- 子路由跳转 -->
<router-link to="/student/grade">学生成绩管理</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<!-- 子路由跳转 -->
<router-link to="/student/register">学生注册管理</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<!-- 这个是大的导航栏 -->
<template slot="title"><i class="el-icon-message"></i>职员管理</template>
<!-- 这是大导航里面展开的小列表 -->
<el-menu-item-group>
<el-menu-item index="2-1">教师信息管理</el-menu-item>
<el-menu-item index="2-2">教师工资管理</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-main>
<!-- 让主体做子路由的显示 -->
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
name: 'Main'
}
</script>
<style>
</style>
書き込んだ後、上記のサブルートのパスに従ってサブルートを書き込むことができます。
最初に新しい学生ディレクトリを作成し、次に2つのVueファイルを書き込みます。1つはGrade.vueと呼ばれ、もう1つはRegister.vueと呼ばれます。
次のように、divを記述し、コンテンツをエクスポートするだけです。
次に、ルートに移動してインポートおよび登録します。
ここでは、ホームページに子を追加してから、ルートを追加していることに注意してください。
import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login'
import Main from '../views/Main'
import Register from '../views/student/Register.vue'
import Grade from '../views/student/Grade.vue'
Vue.use(Router);
export default new Router({
routes:[
//登錄頁
{
path:'/login',
name:'Login',
component:Login
},
//主页
{
path:'/main',
name:"Main",
component:Main,
children:[
{
path:'/student/register',
name:"Register",
component:Register,
},
{
path:'/student/grade',
name:"Grade",
component:Grade,
}
]
}
]
})
その後、直接クリックしてサブルートにジャンプできます。
[StudentGradeManagement ]を
クリックして表示します[StudentRegistrationManagement]をクリックして表示します。