当前位置：首页 > news >正文

17.路由配置与页面创建

news 来源：原创 2024/9/22 3:37:59

路由配置与页面创建

官网：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"routerunique-opened@open="handleOpen"@close="handleClose"background-color="#0a2542"text-color="#fff">

效果为刷新保留在此页面