17.路由配置与页面创建

路由配置与页面创建

官网:https://router.vuejs.org/zh/

Vue Router 和 组合式 API | Vue Router (vuejs.org)

1. 修改index.ts

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中添加样式

    css 复制代码
    // 首页颜色
    :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>

vue 复制代码
<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中

ts 复制代码
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;
})
vue 复制代码
    <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"
  >

效果为刷新保留在此页面

相关推荐
烛阴10 分钟前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
光而不耀@lgy15 分钟前
C++初登门槛
linux·开发语言·网络·c++·后端
lkbhua莱克瓦2420 分钟前
用C语言实现——一个中缀表达式的计算器。支持用户输入和动画演示过程。
c语言·开发语言·数据结构·链表·学习方法·交友·计算器
Mr__Miss23 分钟前
面试踩过的坑
java·开发语言
啊丢_25 分钟前
C++——Lambda表达式
开发语言·c++
lh_125441 分钟前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx43 分钟前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
timing9941 小时前
LVGL在VScode的WSL2中仿真
ide·vscode·编辑器
Chh07151 小时前
《R语言SCI期刊论文绘图专题计划》大纲
开发语言·r语言
Yeats_Liao1 小时前
Go 语言 TCP 端口扫描器实现与 Goroutine 池原理
开发语言·tcp/ip·golang