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

效果为刷新保留在此页面

相关推荐
YBN娜9 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=9 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
杨荧11 分钟前
【JAVA毕业设计】基于Vue和SpringBoot的服装商城系统学科竞赛管理系统
java·开发语言·vue.js·spring boot·spring cloud·java-ee·kafka
minDuck13 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
白子寰18 分钟前
【C++打怪之路Lv14】- “多态“篇
开发语言·c++
王俊山IT30 分钟前
C++学习笔记----10、模块、头文件及各种主题(一)---- 模块(5)
开发语言·c++·笔记·学习
为将者,自当识天晓地。32 分钟前
c++多线程
java·开发语言
小政爱学习!34 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。39 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui