一、根據後臺返回的不同選單許可權，實現不同的選單展示。如：圖一是後臺返回給我的一個包含主頁許可權的menuList列表，然後我們要把圖一的列表處理成我們想要的格式的列表，如圖二為了方便處理我是按照vue-router格式進行處理的。
圖一（處理前資料）：

圖二（處理後資料）：

二、
1.以下程式碼是處理許可權列表資料，我是把它寫在utils的公共檔案內作為公共程式碼來使用，也可以寫在mutation裡面，然後存入localstorage防止頁面重新載入後資料丟失問題。

 util.mapMenuList = function (info) {
        let list = JSON.parse(JSON.stringify(info));
        info.map((item, index) => {
            list[index] = {
                path: item.url,
                title: item.name,
                name: item.title,
                component: Main,
                children: item.menuDto.map(child => {
                    return {
                        path: child.url.split('/').slice(2).join(''),
                        title: child.name,
                        name: child.title,
                        component: () => import('../views' + item.url + '/' + child.url.split('/').slice(2).join('') + '/' +child.url.split('/').slice(2).join('') + '.vue')
                    }
                })
            }
            router.options.routes.push(list[index])//不是響應式，需手動注入路由，否則this.$router.options.routes內即便進行了addRoutes頁不會顯示路由列表
        })
        router.addRoutes(list);
        window.localStorage.setItem('initList', JSON.stringify(list));//把處理好的資料存入localstorage
    }
    
    2.資料處理好之後在登入元件內進行呼叫，因為我們要在登入的時候就把處理好的資料存入localstorage。
    methods: {
                handleSubmit() {
                    this.$refs.loginForm.validate(valid => {
                        if (valid) {
                            const params = this.$qs.stringify(this.form);
                            this.$axios.post("/loan/home/login", params).then(info => {
                                const {data, code, codeMessage} = info.data;
                                this.$store.commit("clearAllTags");
                                if (code === 1) {
                                    const {user, menuList, role} = data;
                                    this.$cookie.set("user", user.name);
                                    this.$cookie.set("userInfo", user);
                                    this.$cookie.set("role", role);
                                    this.$localStorage.set("menuList", JSON.stringify(menuList));//把從後臺獲取到的許可權路由存入本地快取
                                    util.mapMenuList(menuList);//呼叫資料處理函式
                                    let route = JSON.parse(window.localStorage.getItem('initList'));
                                    if (route[0].name === 'home') {//判斷登入許可權是否有主頁許可權，有的的話登入之後跳到主頁，否則跳到歡迎登陸頁
                                        this.$router.replace({
                                            path: '/home'
                                        });
                                    } else {
                                        this.$router.replace({
                                            path: '/welcome'
                                        });
                                    }
                                } else {
                                    this.$Message.warning(codeMessage);
                                }
                            });
                        }
                    });
                },
            },
 

三、資料存好之後我們就可以在元件內進行呼叫，迴圈遍歷資料進行顯示就ok了。

1.從localstorage取資料
mounted() {
        this.routeList = JSON.parse(localStorage.getItem("initList"));
    },


 2.遍歷資料進行顯示
  <Menu ref="sideMenu" :active-name="$route.name" :open-names="openNames" :theme="menuTheme" width="auto" z
          @on-select="changeMenu">
        <template v-for="item in routeList">
            <MenuItem v-if="item.children.length<=1" :name="item.name" :key="'menuitem' + item.name">
                <span class="layout-text" :key="'title' + item.name">{{ item.title }}</span>
            </MenuItem>

            <Submenu v-if="item.children.length > 1" :name="item.name" :key="item.name">
                <template slot="title">
                    <span class="layout-text">{{ itemTitle(item) }}</span>
                </template>
                <template v-for="child in item.children">
                    <MenuItem :name="child.name" :key="'menuitem' + child.name">
                        <span class="layout-text" :key="'title' + child.name">{{ itemTitle(child) }}</span>
                    </MenuItem>
                </template>
            </Submenu>
        </template>
    </Menu>
 

3.左側是處理好以後顯示的列表

四、還有一個問題就是我們在退出登入的時候要清空所有資料的快取，包括所有路由以及vuex狀態管理裡面的資料，否則下次登入的時候會有上次登入的路由快取資訊。我的處理是在退出登入的時候進行頁面重新整理讓整個頁面過載一次就ok了
 logout(state, vm) {
            Cookies.remove('user');
            Cookies.remove('password');
            Cookies.remove('access');
            localStorage.clear();
            window.location.reload();//重新整理頁面過載
        }