vue3+Element-plus 动态路由配置

使用vue3 + Element-plus 进行动态路由配置

首先来看一下路由结构 免得出现疑惑

const routes = [
  {
    path: '/login',
    name: 'Login',
    meta: { title: '登录页面' },
    component: () => import('@/views/Login')
  },
  {
    path: '/',
    name: 'Common',
    component: () => import('@/views/Common'),
    meta: { title: '首页' },
    redirect: { path: '/homepage' },
    children: [
      {
        path: '/homepage',
        component: () => import('@/views/home/HomePage'),
        name: '首页',
        meta: {
          title: '首页',
        },
      },
      {
        path: '/Setting',
        component: () => import('@/views/Setting/Setting'),
        name: '用户中心',
        meta: {
          title: '用户中心',
          sidebar: [
            { id:0, name: '部门管理', path: '/Setting/Department' },
            { id:1, name: '用户管理', path: '/Setting/Role' },
          ]
        },
        redirect: { path: '/Setting/Department' },
        children: [
          {
            path: '/Setting/Department',
            component: () => import('@/views/Setting/Department'),
            name: '用户中心/部门管理',
            meta: {
              title: '部门管理',
            },
          },
          {
            path: '/Setting/Role',
            component: () => import('@/views/Setting/Role'),
            name: '用户中心/角色管理',
            meta: {
              title: '角色管理',
            },
          },
        ]
      },
    ],
  },
]

使用element-plus的Menu 菜单 在下面介绍如何配置

动态主路由配置

<template>
    <el-menu :default-active="activeIndex" :router="true"
        :ellipsis="false" class="el-menu-demo" mode="horizontal" 
        background-color='rgba(128,147,255)'
        text-color='#ffffff' active-text-color='rgba(128,147,255)'>
        <el-menu-item v-for="(i,item) in $route.matched[0].children" :key="item" :index = i.path>{{i.name}}</el-menu-item>
    </el-menu>
</template>

<script>

import {useRoute} from 'vue-router'
import { ref } from 'vue'

export default{
    setup(){
        const activeIndex = ref('')
        const route = useRoute()
        const sesson = window.sessionStorage
        sesson.Hearderpath = '/' + route.path.split('/')[1].toLowerCase()
        activeIndex.value = sesson.Hearderpath
        return{ route ,activeIndex ,}
    }
}
 
</script>

使用 $route 获取到路由信息进行循环 这块比较简单一点
接下来就比较重要了

如何进行跳转到指定页面 如何显示高亮部分 如何刷新之后高亮部分不会消失或者匹配错误

进行路由跳转可以用el-menu-item 中的属性 index 绑定循环路由信息中的path 但是要在el-menu上 使用 :router=true来开启路由模式 就可以做到路由跳转

:default-active=“activeIndex” 这个属性就是用来做高亮显示的

<script>

import {useRoute} from 'vue-router'
import { ref } from 'vue'

export default{
    setup(){
        const activeIndex = ref('')
        const route = useRoute()
        // 现在做的是主路由跳转  循环的是主路由
        // 而带子路由的页面 会默认一个子页面作为默认显示的
        // 这就导致路面显示的路由是子路由的页面 而不是主路由了
        // 相当于 循环的是 /homepage和/Setting
        // 而/Setting带子路由 所以进去之后看到的是子路由的页面 路径就是/Setting/Department
        // 这样就会造成路径不匹配 导致高亮显示部分刷新之后就会消失或者匹配错误
        const sesson = window.sessionStorage
        sesson.Hearderpath = '/' + route.path.split('/')[1].toLowerCase()//对子路由进行处理 只匹配主路由的path
        activeIndex.value = sesson.Hearderpath //刷新之后取到session中存储的path就可以做到高亮显示
        return{ route ,activeIndex ,}
    }
}
 
</script>

这样就可以做到高亮显示 刷新不会匹配错误或者消失

侧边栏动态子路由配置

这个就比较简单一点了

<template>
    <div>
        <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" :router="true">
            <el-menu-item v-for="i in $route.meta.sidebar" :key="i.id" :index="i.path" > 
                <span>{{i.name}}</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
import { ref } from "vue"
import { useRoute } from "vue-router";

export default{
    setup(){
        const activeIndex = ref('')
        const route = useRoute()
        // 因为这次是匹配的子路由 所以不需要做处理 
        activeIndex.value = route.path
        return{ activeIndex, route}
    }
}
</script>

成品展示