首先是.vue檔案代碼
<template>
<div>
<el-container>
<el-aside width="240px">
<el-menu :default-active="$route.path" class="el-menu-vertical-demo" router>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>工廠設定</span>
</template>
<el-menu-item-group>
<el-menu-item index="/A-Business/A-Business">商戶資訊</el-menu-item>
<el-menu-item index="/B-Extension/B-Extension">推廣團隊</el-menu-item>
<el-menu-item index="/C-Management/C-Management">插件管理</el-menu-item>
<el-menu-item index="/D-customer/D-customer">我的客戶</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header>Header</el-header>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: "Main",
data() {
return {};
},
methods: {},
};
</script>
<style scoped>
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
height: 100%;
}
.el-aside {
background-color: #d3dce6;
color: #333;
height: 100vh;
}
.el-main {
background-color: #e9eef3;
color: #333;
}
</style>
router檔案夾中的index.js代碼
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [{
// 首頁面
path: '/Home/Home',
component: () => import('../views/Home/Home.vue'),
children: [{
path: "/A-Business/A-Business",
component: () => import('../views/A-Business/A-Business.vue')
},
{
path: "/B-Extension/B-Extension",
component: () => import('../views/B-Extension/B-Extension.vue')
},
{
path: "/C-Management/C-Management",
component: () => import('../views/C-Management/C-Management.vue')
}, {
path: "/D-customer/D-customer",
component: () => import('../views/D-customer/D-customer.vue')
},
]
}, ]
const router = new VueRouter({
mode: 'hash',
base: process.env.BASE_URL,
routes
})
export default router
最終效果
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/249878.html
標籤：其他