第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
active-text-color="#ffd04b"
background-color="#545c64"
class="el-menu-vertical-demo"
text-color="#fff"
default-active="1"
router>
v-if="item.children && item.children.length"
:index="item.menuId" >
{{item.name}}
v-for="(children, index) in item.children"
:key="index"
:route="{path:children.path}"
:index="children.menuId" >
{{children.name}}
v-else
:route="{path:item.path}"
:index="item.menuId" >
{{item.name}}
.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%;
}
对以上功能更为具体实现和注释见221223_002shopvue(管理端(Vue)布局面的重构与路由的全局存储)。