如何利用Vue3管理系统实现动态路由和动态侧边菜单栏
时间: 2024-03-16 08:41:45 浏览: 16
在 Vue3 中,可以通过 Vue Router 和 Vuex 来实现动态路由和动态侧边菜单栏。下面是一个简单的实现步骤:
1. 安装和配置 Vue Router 和 Vuex:
```bash
npm install vue-router vuex --save
```
```javascript
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: '/',
name: 'Home',
component: () => import('../views/Home.vue'),
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
```
```javascript
// store/index.js
import { createStore } from 'vuex';
const store = createStore({
state: {
routes: [], // 动态路由
menus: [], // 动态侧边菜单栏
},
mutations: {
setRoutes(state, routes) {
state.routes = routes;
},
setMenus(state, menus) {
state.menus = menus;
},
},
});
export default store;
```
2. 在路由配置文件中,设置动态路由:
```javascript
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: '/',
name: 'Home',
component: () => import('../views/Home.vue'),
meta: {
title: '首页',
icon: 'el-icon-s-home',
},
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue'),
meta: {
title: '关于我们',
icon: 'el-icon-s-custom',
},
},
// ...其他静态路由
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
```
3. 在 Vuex 中,设置动态路由和动态侧边菜单栏:
```javascript
// store/index.js
import { createStore } from 'vuex';
const store = createStore({
state: {
routes: [], // 动态路由
menus: [], // 动态侧边菜单栏
},
mutations: {
setRoutes(state, routes) {
state.routes = routes;
},
setMenus(state, menus) {
state.menus = menus;
},
},
actions: {
generateRoutes({ commit }) {
// 根据用户权限,动态生成路由和菜单项
// 生成的路由和菜单项可以从后端接口获取
const routes = [
{
path: '/dashboard',
name: 'Dashboard',
component: () => import('../views/Dashboard.vue'),
meta: {
title: '仪表盘',
icon: 'el-icon-s-data',
},
},
{
path: '/user',
name: 'User',
component: () => import('../views/User.vue'),
meta: {
title: '用户管理',
icon: 'el-icon-user-solid',
},
},
// ...其他动态路由
];
const menus = routes.map(route => {
return {
name: route.name,
title: route.meta.title,
icon: route.meta.icon,
};
});
commit('setRoutes', routes);
commit('setMenus', menus);
},
},
});
export default store;
```
4. 在 App.vue 中,使用动态生成的路由和菜单项:
```vue
<template>
<div>
<el-container>
<el-aside width="200px">
<el-menu :default-active="$route.path" class="el-menu-vertical-demo" :collapse="isCollapse">
<el-submenu v-for="menu in menus" :key="menu.name" :index="menu.name">
<template #title>
<i :class="menu.icon"></i>
<span>{{ menu.title }}</span>
</template>
<el-menu-item v-for="route in routes" :key="route.path" v-if="route.name === menu.name" :index="route.path">
{{ route.meta.title }}
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header>
<el-button @click="isCollapse = !isCollapse">
<i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
</el-button>
</el-header>
<el-main>
<router-view />
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
name: 'App',
computed: {
...mapState(['routes', 'menus']),
},
data() {
return {
isCollapse: false,
};
},
created() {
this.$store.dispatch('generateRoutes');
},
};
</script>
```
在上面的代码中,我们在 `created` 钩子函数中调用 `generateRoutes` action 来生成动态路由和菜单项。在侧边菜单栏中,我们使用 `v-for` 指令遍历菜单项,并根据菜单项的 `name` 属性来筛选出对应的路由。在路由筛选完成后,我们再使用 `v-for` 指令遍历筛选后的路由,将路由的 `meta.title` 属性作为菜单项的标题。