面试题：Vue项目中权限管理的动态菜单如何实现？

Question

假设在一个大型Vue项目中，权限管理要求根据用户的角色动态生成菜单。菜单结构较为复杂，包含多级嵌套。请详细说明实现动态菜单的思路，包括如何根据用户权限获取菜单数据，如何在Vue组件中渲染菜单，以及怎样处理菜单的点击事件和路由跳转，需结合Vue的相关技术如Vuex、组件通信等进行阐述，并给出关键代码示例。

Answer 1

1. 获取菜单数据

1. 后端接口设计：后端提供一个接口，根据用户角色返回对应的菜单数据。例如，接口 /api/menus，通过 token 识别用户角色，返回类似如下结构的菜单数据：

[
    {
        "id": 1,
        "title": "首页",
        "path": "/home",
        "icon": "home-icon",
        "children": []
    },
    {
        "id": 2,
        "title": "管理",
        "path": null,
        "icon": "manage-icon",
        "children": [
            {
                "id": 21,
                "title": "用户管理",
                "path": "/user-manage",
                "icon": "user-icon",
                "children": []
            }
        ]
    }
]

2. 在Vuex中获取数据：在 store/modules/menu.js 中定义如下：

import axios from 'axios';

const state = {
    menuList: []
};

const mutations = {
    SET_MENU_LIST(state, menuList) {
        state.menuList = menuList;
    }
};

const actions = {
    async getMenuList({ commit }) {
        try {
            const response = await axios.get('/api/menus');
            commit('SET_MENU_LIST', response.data);
        } catch (error) {
            console.error('获取菜单数据失败', error);
        }
    }
};

export default {
    namespaced: true,
    state,
    mutations,
    actions
};

在 main.js 中挂载Vuex：

import Vue from 'vue';
import Vuex from 'vuex';
import menu from './store/modules/menu';

Vue.use(Vuex);

const store = new Vuex.Store({
    modules: {
        menu
    }
});

new Vue({
    store,
    // 其他配置
}).$mount('#app');

2. 在Vue组件中渲染菜单

1. 创建菜单组件：例如 Menu.vue

<template>
    <ul>
        <li v-for="menu in menuList" :key="menu.id">
            <a v-if="menu.path" :href="menu.path">{{ menu.title }}</a>
            <span v-else>{{ menu.title }}</span>
            <Menu v-if="menu.children && menu.children.length > 0" :menuList="menu.children" />
        </li>
    </ul>
</template>

<script>
export default {
    name: 'Menu',
    props: {
        menuList: {
            type: Array,
            default: () => []
        }
    }
};
</script>

2. 在需要的页面引入并使用：例如在 App.vue 中

<template>
    <div id="app">
        <Menu :menuList="$store.state.menu.menuList" />
    </div>
</template>

<script>
import Menu from './components/Menu.vue';

export default {
    name: 'App',
    components: {
        Menu
    }
};
</script>

3. 处理菜单点击事件和路由跳转

1. 使用Vue Router：在 router/index.js 中配置路由：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import UserManage from '@/views/UserManage.vue';

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: '/home',
            name: 'Home',
            component: Home
        },
        {
            path: '/user-manage',
            name: 'UserManage',
            component: UserManage
        }
    ]
});

2. 在菜单组件中处理点击事件：修改 Menu.vue

<template>
    <ul>
        <li v-for="menu in menuList" :key="menu.id">
            <router-link v-if="menu.path" :to="menu.path" exact>{{ menu.title }}</router-link>
            <span v-else>{{ menu.title }}</span>
            <Menu v-if="menu.children && menu.children.length > 0" :menuList="menu.children" />
        </li>
    </ul>
</template>

<script>
export default {
    name: 'Menu',
    props: {
        menuList: {
            type: Array,
            default: () => []
        }
    }
};
</script>

这样，当点击有 path 的菜单项时，会自动跳转到对应的路由页面。如果菜单项有子菜单，则会递归渲染子菜单。