Vue + Element Plus：动态添加路由，打造个性化权限管理系统

2024-01-05 05:48:17

Vue + Element Plus 动态添加路由：实现权限管理和优化路由性能

动态添加路由的必要性

在权限管理系统中，为确保用户只能访问有权访问的页面，我们需要根据其权限动态加载可访问的页面。

实现步骤

1. 安装和引入 Element Plus

npm install element-plus -S

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

2. 创建侧边栏菜单

<el-menu :router="true" class="el-menu-vertical">
  <el-menu-item v-for="item in menuList" :key="item.path">
    <el-icon><i :class="item.icon"></i></el-icon>
    <span>{{ item.name }}</span>
    <router-link :to="item.path"></router-link>
  </el-menu-item>
</el-menu>

3. 获取菜单列表并动态添加路由

created() {
  this.getMenuList()
},
methods: {
  getMenuList() {
    // 从后端获取菜单列表
    const menuList = [{
      path: '/home',
      name: '首页',
      icon: 'el-icon-s-home'
    }, {
      path: '/about',
      name: '关于',
      icon: 'el-icon-s-help'
    }]
    this.menuList = menuList

    // 动态添加路由
    menuList.forEach(item => {
      router.addRoute({
        path: item.path,
        component: () => import(`../views/${item.path}.vue`)
      })
    })
  }
}

4. 创建页面组件

// Home.vue
<template>
  <div>首页</div>
</template>
<script>
export default {
  name: 'Home'
}
</script>

// About.vue
<template>
  <div>关于</div>
</template>
<script>
export default {
  name: 'About'
}
</script>