17.路由配置与页面创建

路由配置与页面创建

官网：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. 问题

1. 首页字为灰色
   解决方式：
   在Menu.vue中添加样式

   // 首页颜色
   :deep(.el-menu-item){
   	color:var(--el-border-color) !important;
   }
   

2. 折叠时鼠标悬浮的字体为灰色
   解决方式：
   在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"
  >

效果为刷新保留在此页面