第5章 管理端(Vue)布局面的重构与路由的全局存储
1 重构路由：src\router\index.js
import {
createRouter,
createWebHashHistory
} from 'vue-router'
import HomeView from '../views/HomeView.vue'
//注意：path属性所对应的字符串不能与“*.vue”文件名相同否则会出现错误。
const routes = [{
path: '/Login',
name: '登录',
component: () => import('../views/LoginView.vue')
},
{
path: '/',
name: 'Admin',
component: () => import('../components/AdminLayoutComponen.vue'),
children: [{
path: '/',//默认启动页，默认加载子路径与父路径相同的情况下会自动加载。
name: '欢迎',
icon: "HomeFilled",
menuId: '1',
component: () => import('../views/WelcomeView.vue'),
},
{
path: '/Test',
name: '测试',
icon: "Setting",
menuId: '2',
component: () => import('../views/TestView.vue'),
},
{
path: '/Test-1',
name: '测试-1',
icon: "Setting",
menuId: '3',
component: () => import('../views/Test-1View.vue'),
},
{
path: '/Test-2',
name: '测试-2',
icon: "Setting",
menuId: '4',
component: () => import('../views/Test-2View.vue'),
},
{
path: '/',
name: '用户管理',
icon: "User",
menuId: '5',
children: [{
path: '/Users/User',
name: '用户',
menuId: '5-1',
component: () => import('../views/Users/UserView.vue'),
},
{
path: '/Users/UserDetail',
name: '用户详情',
menuId: '5-2',
component: () => import('../views/Users/UserDetailView.vue'),
},
{
path: '/Users/Role',
name: '角色',
menuId: '5-3',
component: () => import('../views/Users/RoleView.vue'),
},
{
path: '/Users/RoleDetail',
name: '角色详情',
menuId: '5-4',
component: () => import('../views/Users/RoleDetailView.vue'),
},
]
},
{
path: '/Hello',
name: 'Hello',
icon: "Menu",
menuId: '6',
component: () => import('../components/HelloWorld.vue'),
},
{
path: '/Test-3',
name: '测试-3',
icon: "Setting",
menuId: '7',
component: () => import('../views/Test-3View.vue'),
},
]
},
{
path: '/home',
name: 'home',
component: HomeView,
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue'),
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
// 如果路由实例中有标题实例，依次把标题渲染显示在浏览器相对应的标签上。
//to: 当前跳转到页面的路由实例。
router.beforeEach(async (to) => {
if (to.name) {
document.title = to.name;
}
});
export default router
2定义管理端布局组件页：src\components\AdminLayoutComponen.vue
<template>
<el-container>
<!-- 侧边栏 ，"<div class="aside">标签可被删除，为了下拉条控件样式保存了该标签"-->
<div class="aside">
<el-aside width="200px">
<!--必须包含有："el-menu"标签，否则左侧菜单栏的高度不能达到100% -->
<el-menu
active-text-color="#ffd04b"
background-color="#545c64"
class="el-menu-vertical-demo"
text-color="#fff"
default-active="1"
router>
<template v-for="(item, index) in menuList" :key="index">
<el-sub-menu
v-if="item.children && item.children.length"
:index="item.menuId" >
<template #title>
<el-icon>
<component :is="item.icon"></component>
</el-icon>
<span>{{item.name}}</span>
</template>
<el-menu-item
v-for="(children, index) in item.children"
:key="index"
:route="{path:children.path}"
:index="children.menuId" >
{{children.name}}
</el-menu-item>
</el-sub-menu>
<el-menu-item
v-else
:route="{path:item.path}"
:index="item.menuId" >
<el-icon>
<component :is="item.icon"></component>
</el-icon>
<span>{{item.name}}</span>
</el-menu-item>
</template>
</el-menu>
</el-aside>
</div>
<el-container>
<el-header>Header</el-header>
<el-main>
<router-view></router-view>
</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</template>
<script>
import router from '../router/index.js'
export default {
data() {
return {
//对所有后台管理路由实例进行存储，为左侧菜单栏的渲染显示提供数据支撑。
menuList: {},
};
},
methods: {
getAllMenu() {
this.menuList = this.$router.options.routes.find(route => route.path === "/").children;
},
},
mounted() {
this.getAllMenu();
console.log(router.options.routes.find(route => route.path === "/"));
console.log(JSON.stringify(router.options.routes.find(route => route.path === "/")));
//以“JSON”编码格式把所有后台管理路由实例进行全局存储(Vuex=store)。
if(window.localStorage.router!=null)
window.localStorage.router=null;
console.log(window.localStorage.router);
window.localStorage.router=JSON.stringify(router.options.routes.find(route => route.path === "/"))
console.log(window.localStorage.router);
},
}
</script>
<style scoped lang="scss">
.aside {
width: 200px;
overflow: hidden;
background-color: #545c64;
}
.el-aside {
height: 100%;
//overflow-x: hidden;
//overflow-y: scroll;
}
.el-header {
background-color: #ff0000;
color: #FFFFFF;
}
.el-main {
height: 90vh; //必须定义："height"为：90vh，否则主区域的高度不能达到100%；如果大于90vh整页的调度将超过100%。
}
.el-footer {
background-color: #0000ff;
color: #FFFFFF;
}
//必须定义：".el-menu"样式，否则左侧菜单栏的高度不能达到100%
.el-menu {
height: 90vh; //必须定义："height"为：90vh，否则左侧菜单栏的高度不能达到100%；如果大于90vh整页的调度将超过100%。
}
.el-menu .el-menu-item.is-active {
background-color: #000000;
font-weight: 900;
font-size: 120%;
}
</style>
对以上功能更为具体实现和注释见221223_002shopvue(管理端(Vue)布局面的重构与路由的全局存储)。