目次
(1) ユーザー情報コンポーネントを作成し、views/user ディレクトリに Profile.vue というビュー コンポーネントを作成します。
(2) views/user ディレクトリ下のユーザーリストコンポーネントに List.vue という名前のビューコンポーネントを作成する
(3) ホームページ ビューを変更するには、ElementUI レイアウト コンテナー コンポーネントが使用されている Main.vue ビュー コンポーネントを変更します。
(4) 追加されたコンポーネント、ルーターに移動して構成ファイルを変更します
サブルーティングとも呼ばれるネストされたルーティングは、通常、実際のアプリケーションでは多層のネストされたコンポーネントで構成されます。
(1) ユーザー情報コンポーネントを作成し、views/user ディレクトリに Profile.vue というビュー コンポーネントを作成します。
<template>
<h1>个人信息</h1>
</template>
<script>
export default {
name: "UserProfile"
}
</script>
<style scoped>
</style>
(2) views/user ディレクトリ下のユーザーリストコンポーネントに List.vue という名前のビューコンポーネントを作成する
<template>
<h1>用户列表</h1>
</template>
<script>
export default {
name: "UserList"
}
</script>
<style scoped>
</style>
(3) ホームページ ビューを変更するには、ElementUI レイアウト コンテナー コンポーネントが使用されている Main.vue ビュー コンポーネントを変更します。
<template>
<div>
<el-container>
<el-aside width="200px">
<el-menu :default-openeds="['1']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
<el-menu-item-group>
<el-menu-item index="1-1">
<!--插入的地方-->
<router-link to="/user/profile">个人信息</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<!--插入的地方-->
<router-link to="/user/list">用户列表</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-caret-right"></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-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<el-main>
<!--在这里展示视图-->
<router-view />
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped lang="scss">
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
(4) 追加されたコンポーネント、ルーターに移動して構成ファイルを変更します
//导入vue
import Vue from 'vue';
import VueRouter from 'vue-router';
//导入组件
import Main from "../views/Main";
import Login from "../views/Login";
//导入子模块
import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";
//使用
Vue.use(VueRouter);
//导出
export default new VueRouter({
routes: [
{
//登录页
path: '/main',
component: Main,
// 写入子模块
children: [
{
path: '/user/profile',
component: UserProfile,
}, {
path: '/user/list',
component: UserList,
},
]
},
//首页
{
path: '/login',
component: Login
},
]
})
(5) テストを実行する