###
Vue 3.0 中实现
路由菜单
在
Vue 3.0 应用程序中创建
动态路由菜单涉及几个关键步骤。这不仅涉及到
前端框架本身的功能，还可能包括从服务器端接收数据并据此构建导航结构。
####
动态加载
路由配置
为了基于用户角色或其他条件来决定哪些页面应该被展示给特定用户，在应用初始化阶段可以从远程API请求获取必要的
路由信息[^2]。一旦这些信息可用，则可以通过编程方式向 `
vue-router` 添加新路径：
```
javascript
import { createRouter, createWebHistory } from &#
39;
vue-router&#
39;
// 假设这是来自后端的数据
const routesFromServer = [
{
id: 1,
route: &#
39;/home/user&#
39;,
name: &#
39;用户管理&#
39;,
},
// 更多
...
]
function addRoutesTo
VueRouter(routerInstance) {
const dynamicRoutes = routesFromServer
.map(route => ({
path: route
.route,
component: () => import(`@/views/${route
.name}
.vue`),
meta: {
title: route
.name }
}))
routerInstance
.addRoute({ children: dynamicRoutes })
}
const router = createRouter({
history: createWebHistory(),
routes: [] // 初始为空数组
})
addRoutesTo
VueRouter(router)
export default router;
```
这段代码展示了如何定义一个函数用于处理接收到的
路由列表，并将其转换成适合 `
vue-router` 的格式；之后调用了此方法完成实际添加操作。
#### 结合
Vuex存储状态
考虑到应用程序的状态管理和组件间通信需求，推荐利用
Vuex 来保存当前用户的权限级别以及相应的可见链接集合。这样做的好处是可以轻松地在整个项目范围内共享这些重要设置而无需重复传递属性或使用全局变量[^
3]。
```typescript
// store/index
.ts
import { createStore } from &#
39;
vuex&#
39;
interface StateType {
visibleMenus: string[]
}
const store = createStore<StateType>({
state(): StateType {
return {
visibleMenus: []
};
},
mutations: {
SET_VISIBLE_MENUS(state, menus:string[]) {
state
.visibleMenus = menus;
}
},
actions: {
async fetchUserPermissions(context) {
try {
let response = await axios
.get(&#
39;/api/get-user-permissions&#
39;);
context
.commit(&#
39;SET_VISIBLE_MENUS&#
39;,
(response
.data as any[])
.map(item=>item
.route));
} catch(error){
console
.error("Failed to load user permissions
.", error);
}
}
}
});
export default store;
```
这里给出了一个简单的
Vuex 存储实例，它负责维护一组字符串形式表示的可访问 URL 地址。通过异步行动（action），可以在启动时查询最新的授权详情并将结果提交到突变（mutation）以便更新内部状态树中的相应字段。
#### 渲染侧边栏菜单
最后一步是在视图层面上反映上述逻辑的结果——即根据已知的有效入口点渲染出美观易用的导航条目。对于这种情况来说，
Vuetify 或 Element Plus 等UI库提供了丰富的预制组件可以帮助快速搭建界面布局[^4]。
```html
<template>
<div class="menu-container">
<ul v-if="visibleMenuItems
.length >
0">
<li v-for="(item,index) in visibleMenuItems" :key="index">
<a :href="item">{{ item }}</a>
</li>
</ul>
<p v-else>No accessible menu items
.</p>
</div>
</template>
<script lang="ts">
import { computed, defineComponent } from &#
39;
vue&#
39;;
import { useStore } from &#
39;@/store&#
39;;
export default defineComponent({
setup() {
const store = useStore();
const visibleMenuItems = computed(() => store
.state
.visibleMenus);
return { visibleMenuItems };
}
});
</script>
```
这个模板片段假设存在一个计算属性 `visibleMenuItems` ，其值来源于
Vuex Store 。当检测到至少有一个有效的菜单项时会显示无序列表 `<ul>` 否则提示没有可供选择的内容。
扫一扫
9420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
