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"
  >

效果为刷新保留在此页面

相关推荐
Swift社区1 小时前
在 Swift 中实现字符串分割问题:以字典中的单词构造句子
开发语言·ios·swift
没头脑的ht1 小时前
Swift内存访问冲突
开发语言·ios·swift
没头脑的ht1 小时前
Swift闭包的本质
开发语言·ios·swift
wjs20241 小时前
Swift 数组
开发语言
stm 学习ing2 小时前
FPGA 第十讲 避免latch的产生
c语言·开发语言·单片机·嵌入式硬件·fpga开发·fpga
y先森3 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy3 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
湫ccc3 小时前
《Python基础》之字符串格式化输出
开发语言·python