使用Vue3、
Element Plus、JavaScript
和Vite制作
动态路由菜单，可按以下步骤操作：
### 项目初始化
使用Vite创建一个新的Vue3项目：
```bash
npm init vite@latest my
- vue
- project
-- --template vue
cd my
- vue
- project
npm install
npm install
element-plus
```
### 路由配置
在`src/router/index.js`文件中进行路由配置，可参考以下示例：
```javascript
import { createRouter, createWebHistory } from "vue
-router";
import Login from '@/views/Login.vue';
import
Layout from '@/views/
Layout.vue';
import { getMenu } from '@/utils/api'; // 获取全部路由接口
import store from '@/store';
const routes = [
{
path: '/login',
component: Login
},
{
path: '/',
name: '
layout',
component:
Layout,
redirect: '/home'
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
router.beforeEach((to, from, next) => {
if (!localStorage.getItem('token')) {
if (to.path === '/login') {
next();
} else {
next('/login');
}
} else {
next();
}
});
if (!localStorage.getItem('token')) {
// 未登录逻辑
} else {
store.dispatch('routesList/getMenuList', {
router,
fn: () => {
router.replace(`${router.currentRoute.value.fullPath}`);
}
});
}
export default router;
```
此代码设置了基础路由
和路由守卫，根据用户是否登录决定访问路径，同时在用户登录后获取
动态路由菜单列表。
###
动态菜单获取
与渲染
在`store`中创建`routesList`模块来管理
动态路由数据。在`src/store/modules/routesList.js`文件中：
```javascript
import { getMenu } from '@/utils/api';
const state = {
menuList: []
};
const mutations = {
SET_MENU_LIST(state, menuList) {
state.menuList = menuList;
}
};
const actions = {
async getMenuList({ commit }, { router, fn }) {
try {
const res = await getMenu();
const menuList = res.data;
commit('SET_MENU_LIST', menuList);
//
动态添加路由
menuList.forEach(route => {
router.addRoute('
layout', route);
});
fn();
} catch (error) {
console.error('获取菜单列表失败', error);
}
}
};
export default {
namespaced: true,
state,
mutations,
actions
};
```
此模块通过`getMenuList`方法从接口获取菜单列表，将其存储在`state`中，并
动态添加到路由中。
### 菜单组件渲染
在`src/components/Menu.vue`文件中使用
Element Plus的`el
-menu`组件渲染菜单：
```vue
<template>
<el
-menu :default
-active="activeMenu" mode="
horizontal">
<template v
-for="menu in menuList" :key="menu.path">
<el
-menu
-item :index="menu.path">
{{ menu.name }}
</el
-menu
-item>
</template>
</el
-menu>
</template>
<script setup>
import { useStore } from 'vuex';
import { ref, onMounted } from 'vue';
const store = useStore();
const menuList = store.state.routesList.menuList;
const activeMenu = ref('');
onMounted(() => {
// 设置当前激活的菜单
activeMenu.value = window.location.pathname;
});
</script>
```
此组件从`store`中获取菜单列表，并渲染成水平菜单。
### 使用菜单组件
在`src/views/
Layout.vue`文件中使用`Menu.vue`组件：
```vue
<template>
<div>
<Menu />
<router
-view />
</div>
</template>
<script setup>
import Menu from '@/components/Menu.vue';
</script>
```
### 接口请求
在`src/utils/api.js`文件中编写获取菜单的接口请求：
```javascript
import axios from 'axios';
export const getMenu = () => {
return axios.get('/api/menu');
};
```
通过以上步骤，可使用Vue3、
Element Plus、JavaScript
和Vite制作
动态路由菜单。
本文介绍了如何在Unity中利用HorizontalLayoutGroup和LayoutElement控件来实现聊天系统的动态布局。当角色处于私聊状态时，显示聊天目标标签；否则，在公共频道上聊天时，自动调整布局以适应多用户对话。通过FlexibleWidth属性，可以确保聊天窗口在元素隐藏时能够自动填充空间，提供更好的用户体验。
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
