路由配置与页面创建
官网：https://router.vuejs.org/zh/
Vue Router 和 组合式 API | Vue Router (vuejs.org)
1. 修改index.ts
import { RouteRecordRaw, createRouter, createWebHistory } from "vue-router";
import Layout from '@/layout/Index.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/home',
component: Layout,
redirect: '/dashboard',
children: [
{
path: '/dashboard',
component: () => import('@/layout/dashboard.vue'),
name: 'dashboard',
meta: {
title: '首页',
icon: '#icondashboard'
}
},
{
path: "/adminUser",
component: () => import('@/views/system/AdminUser.vue'),
name: "adminUser",
meta: {
title: "管理员管理",
icon: "UserFilled",
roles: ["sys:adminUser"],
}
},
{
path: "/userList",
component: () => import('@/views/system/UserList.vue'),
name: "userList",
meta: {
title: "用户管理",
icon: "Wallet",
roles: ["sys:userList"],
}
},
{
path: "/menuList",
component: () => import('@/views/menu/Index.vue'),
name: "menuList",
meta: {
title: "菜单管理",
icon: "Menu",
roles: ["sys:menu"],
}
},
{
path: "/goodsType",
component: () => import('@/views/goods/GoodsType.vue'),
name: "goodsType",
meta: {
title: "商品分类",
icon: "UserFilled",
roles: ["sys:goodsType"],
}
},
{
path: "/unusedList",
component: () => import('@/views/goods/UnusedList.vue'),
name: "unusedList",
meta: {
title: "闲置商品",
icon: "UserFilled",
roles: ["sys:unusedList"],
}
},
{
path: "/buyList",
component: () => import('@/views/goods/BuyList.vue'),
name: "buyList",
meta: {
title: "求购商品",
icon: "Wallet",
roles: ["sys:buyList"],
}
},
{
path: "/unusedOrder",
component: () => import('@/views/order/UnusedOrder.vue'),
name: "unusedOrder",
meta: {
title: "闲置订单",
icon: "UserFilled",
roles: ["sys:unusedOrder"],
}
},
{
path: "/buyOrder",
component: () => import('@/views/order/BuyOrder.vue'),
name: "buyOrder",
meta: {
title: "求购订单",
icon: "UserFilled",
roles: ["sys:buyOrder"],
}
},
// {
// path: "/bannerList",
// component: () => import('@/views/banner/Index.vue'),
// name: "bannerList",
// meta: {
// title: "广告列表",
// icon: "UserFilled",
// roles: ["sys:bannerList"],
// }
// },
{
path: "/report",
component: () => import('@/views/report/Index.vue'),
name: "report",
meta: {
title: "投诉管理",
icon: "UserFilled",
roles: ["sys:report"],
}
},
{
path: "/commentList",
component: () => import('@/views/comment/CommentList.vue'),
name: "commentList",
meta: {
title: "评论列表",
icon: "UserFilled",
roles: ["sys:commentList"],
}
}
]
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
2. 创建相应页面
3. 问题
-
首页字为灰色
解决方式：
在Menu.vue中添加样式// 首页颜色 :deep(.el-menu-item){ color:var(--el-border-color) !important; } -
折叠时鼠标悬浮的字体为灰色
解决方式：
在Menu.vue中添加text-color="#fff"在<el-menu>标签中
4. 效果图
5. 在MenuBar.vue组件的el-menu添加router属性
router 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
（已加）
6. src/layout/Index.vue的<el-main>添加路由<router-view>
<template>
<el-container class="mycontainer">
<el-aside width="230px" class="asside">
<Menu></Menu>
</el-aside>
<el-container>
<el-header class="header">Header</el-header>
<el-main class="mymain">
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
7. 设置当前激活的菜单
在Menu.vue中
import { ref,reactive, computed } from 'vue'
import { useRoute,useRouter } from 'vue-router';
import MenuItem from './MenuItem.vue';
//获取当前路由
const route = useRoute();
const router = useRouter();
//当前激活的导航菜单
const activeIndex = computed(()=>{
const {path} = route;
return path;
})
<el-menu
:default-active="activeIndex"
class="el-menu-vertical-demo"
:collapse="isCollapse"
router
unique-opened
@open="handleOpen"
@close="handleClose"
background-color="#0a2542"
text-color="#fff"
>
效果为刷新保留在此页面
