在需要權限控制的頁面，往往存在根據用戶來顯示菜單的情況，單獨根據用戶類型判斷顯然不是很好，如果后面用戶類型發生變化，項目修改維護可能就會比較麻煩，所以比較好的做法是根據后端返回的菜單動態生成頁面路由，以達到完全權限控制的目的，并且若權限發生變化，僅需該配置數據即可

1.創建項目

首先用vue-cli3創建好項目

2.新建文件

創建好項目后，新建我們需要的文件。結構如圖

在這里插入圖片描述

下載相關依賴包 ：element-ui（菜單樣式用） 和 axios（獲取菜單用）

npm i element-ui axios --save

3.到main.js中

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import elementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(elementUi)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

4.先把菜單組件寫好，到menu.vue中

這里使用element-ui的el-menu組件

<template>
  <div class="menulist-inner">
    <el-menu
            default-active="/project"
            :default-openeds="openedMenu"
            background-color="rgba(44,55,71,1)"
            text-color="#A7BAC6"
            active-text-color="#FFFFFF"
            @select="select"
            unique-opened
            @open="open">
      <el-submenu :index="menu.path" v-for="(menu,index) in menus" :key="index">
        <template #title>
          <div class="menuTitlBox">
            <div class="rowBtween menuTitle">
              <div class="rowStart">
                <div class="iconBox" style="margin-right:10px;">
                  <i v-if="/icon/.test(menu.icon)" class="iconfont" :class="menu.icon" style="
                  color:#A7BAC6;font-size:16px;"></i>
                  <img v-else :src="menu.icon" width="18"/>
                </div>
                <span class="font16" :class="{whiteText:(!menu.children || !menu.children.length) && new RegExp(menu.path).test($route.path)}">{{menu.label}}</span>
              </div>
            </div>
            <div class="firstMenuBk" v-if="(!menu.children || !menu.children.length) && new RegExp(menu.path).test($route.path)"></div>
          </div>
        </template>
        <div class="menuItemBox rowEnd"
             v-for="(cMenu,cIndex) in menu.children"
             :key="cIndex"
             :class="{activeMenu:RegExp(cMenu.path).test($route.path)}"
             @click="select(cMenu)"
        >
          <span class="rowStart font14">{{cMenu.label}}</span>
        </div>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
    import {mapState}from 'vuex'
    export default {
        name: "Menu",
        data() {
            return{
                menuMinHeight:0,//
                openedMenu:[],//展開的菜單

            }
        },
        computed:{
            ...mapState(['menus'])
        },
        created(){
            let pathArr=this.$route.path.split('/')
            this.openedMenu=[`/${pathArr[1]}`]
        },
        async mounted() {

        },
        methods: {
            //中菜單
            select(cMenu){
                // console.log(cMenu)
                let {routeName}=cMenu
                this.$router.push({
                    name:routeName
                })
            },
            //菜單展開
            open(index,indexPath){
                // console.log(indexPath)
                this.openedMenu=indexPath
                let menu=this.menus.filter(item=>item.path===index)
                // console.log(menu)
                let routeMenuInfo={}
                let time=0
                if(!menu[0] || !menu[0].children || !menu[0].children.length){
                    routeMenuInfo=menu[0]
                }else{
                    routeMenuInfo=menu[0].children[0]
                    time=500
                }
                let {path,}=routeMenuInfo
                // console.log(path)
                setTimeout(()=>{
                    this.$router.push(path)
                },time)
            },

        }
    }
</script>
<style lang="scss" scoped>
  .menulist-inner{
    min-height:calc(100vh - 50px);
    .menuItemBox{
      height:36px;
      &:hover{
        background:rgba(62,70,120,.4);
        &>span{
          color: #fff;
        }
      }
      span{
        color:#ffffff;
        flex-wrap:nowrap;
        width:150px;
        cursor:pointer;
      }
    }
    .activeMenu{
      background:rgba(62,70,120,1);
    }
  }
  .menuTitlBox{
    .menuTitle{
      position: relative;
      z-index: 10;
    }
    .firstMenuBk{
      position: absolute;
      left:0;
      top:50%;
      width:200px;
      height:56px;
      background:#3e4678;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
    }
    .whiteText{
      color:#ffffff;
    }
  }

</style>
<style>
  .el-submenu{
    position: relative;
  }
  .el-menu{
    border:none !important;
  }
  .el-submenu__icon-arrow{
    width:0;
    height:0;
    color:transparent;
  }
  .el-submenu__icon-arrow:before{
    content:'' !important;
  }
  .el-submenu__icon-arrow:before{
    content:'' !important;
  }
  .el-submenu__title{
    background:rgba(44,55,71,1) !important;
    margin-bottom:5px;
    height:46px !important;
    line-height: 46px !important;
  }

  .el-menu.el-menu--inline{
    background-color: rgba(0,0,0,.2) !important;
  }

  .menulist-inner .menuItemBox.rowEnd span{
    color: #A7BAC6;
  }
  .menulist-inner .menuItemBox.rowEnd.activeMenu span{
    color: #fff;
  }
</style>

5.注冊全局組件

將menu組件注冊為全局組件，方便需要的地方直接引入
到global-components.js文件中

/*
 全局組件引入注冊
  */

import Menu from "../global-components/menu" //菜單

export default {
    install(Vue) {
        Vue.component('Menu',Menu)
    }
};

6.到router文件夾寫好路由模塊

6.1 base-router.js中寫好我們需要的固定的路由

/**
 * 頁面上固定路由
 */
import Layout from '../views/layout/layout'
import Login from '../views/login/login'
import Loading from '../views/loading/loading'
const routes = [
    {
        path: '/',
        redirect: '/loading',
    },
    {
        path: '/layout',
        component:Layout,
        redirect: '/loading',
    },
    {
        path: '/login',
        name: 'Login',
        component: Login
    },
    {
        path: '/loading',
        name: 'Loading',
        component: Loading
    },
]
export default routes

6.2 lm-router.js中寫動態配置路由的方法

import {setUserRoutesData} from "../utils/global-methods";

const RouterPlugin = function() {
    this.$router = null
    this.$store = null
}
RouterPlugin.install = function(router, store) {
    this.$router = router
    this.$store = store
    this.$router.$lmRouter = {
        // 全局配置
        safe: this,
        // 動態路由
        formatRoutes:function (routes) {
            let routers=setUserRoutesData(routes)
            this.safe.$router.addRoutes(routers)
            return routers
        }
    }
}
export default RouterPlugin

6.3 index.js中寫路由入口

import Vue from 'vue'
import VueRouter from 'vue-router'
import baseRoutes from './base-router'
import store from '../store'
import LmRouter from './lm-router'


Vue.use(VueRouter)

const createRouter = () => {
    return new VueRouter({
        scrollBehavior (to, from, savedPosition) {
            if (savedPosition) {
                return savedPosition
            } else {
                return {
                    x: 0,
                    y: to.meta.savedPosition || 0
                }
            }
        },
        routes: [...baseRoutes],
        mode:'history',//
    })
}
let router = createRouter()
/**
resetRouter函數用于重置路由，每一次動態配置路由之前要先重置路由
**/
export function resetRouter() {
    const newRouter = createRouter()
    router.matcher = newRouter.matcher // reset router
    LmRouter.install(router, store)
}
/**
當用戶刷新頁面時，路由數據會丟失，如果已經登錄，需要重新渲染路由。渲染的路由數據在登錄時存在瀏覽器本地
**/
if(sessionStorage.getItem('hasLogin')){
    let sessionMenus=localStorage.getItem('menus')
    sessionMenus=sessionMenus ? JSON.parse(sessionMenus) : []
    let sessionRoutes=localStorage.getItem('userRoutes')
    LmRouter.install(router, store)
    sessionRoutes=sessionRoutes ? JSON.parse(sessionRoutes) : []
    router.$lmRouter.formatRoutes(sessionRoutes, true)
    store.dispatch('setUserRoutes',sessionRoutes)
    store.dispatch('setMenus',sessionMenus)
}

router.beforeEach((to, from, next) => {
    let hasLogin = sessionStorage.getItem('hasLogin')
    // console.log(to, from)
    if(to.name===from.name){
        return
    }
    console.log(hasLogin)
    if(to.name==='Login'){
        sessionStorage.clear()
        localStorage.clear()
        store.state.userRoutes=[]
        store.state.menus=[]
        next({replace:true})
        resetRouter()
        return
    }
    if (!hasLogin) {
        next({path: '/login',replace:true})
        return
    }
    next()

})
/**
 * 解決element-ui點擊同一個菜單報錯
 * @type {VueRouter.push|*}
 */
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}
export default router

7.容器頁和加載頁

大部分有二級菜單的頁面，父級頁面通常只需要路由跳轉功能，代碼一致，為了精簡代碼，我們新建通用的路由容器頁面layout.vue，二級菜單路由頁面經layout頁面跳轉

為避免用戶在瀏覽器直接輸入、粘貼路徑時，或者直接訪問頁面根路徑時找不到路由（因為用戶可能已經登錄了，但這是沒有已經登錄界面），我們新建loading.vue，當用戶粘貼路徑，或者訪問根路徑時，在loading.vue中渲染路由

7.1 layout.vue

<!--Layout-->
<template>
    <div>
        <header class="header">頭部</header>
        <div class="main">
            <div class="aside">
                <Menu/>
            </div>
            <div class="mainRight columnStart">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Layout',
    }
</script>

7.2 loading.vue

<!--加載頁面-->
<template>
    <div class="loadingBox">
        <div class="loadingContentbox columnCenter">
            <i class="el-icon-loading gray999"></i>
            <div class="gray999 font16">頁面加載中...</div>
        </div>

    </div>
</template>

<script>

    import {reqUserRoutes} from "../../api/common";
    import {setUserRoutesData,getAndFilterMenus,} from "../../utils/global-methods";

    export default {
        name: 'Loading',
        data() {
            return {}
        },
        computed: {},
        created(){
            let hasLogin = sessionStorage.getItem('hasLogin')
            if(!hasLogin){
                this.$router.replace('/login')
            }else{
                let menus=localStorage.getItem('menus')
                let userRoutes=localStorage.getItem('userRoutes')
                userRoutes=userRoutes ? JSON.parse(userRoutes) : []
                menus=menus ? JSON.parse(menus) : []
                if(!menus.length || !userRoutes.length){
                    this.getMenuRoutes()
                    return
                }
                let userInfo=getUserInfoFromLocalStorage()
                this.$store.dispatch('setUserInfo',userInfo)
                let {permissions=[]}=userInfo
                this.$store.dispatch('setPermissions',permissions)
                this.$router.replace((userRoutes[0] && userRoutes[0].path) ? userRoutes[0].path : '/404')
            }
        },
        methods: {
            //獲取菜單和路由
            async getMenuRoutes(){
                let userRoutes=await reqUserRoutes()
                console.log(userRoutes)
                let menus=getAndFilterMenus(JSON.parse(JSON.stringify(userRoutes)))
                if(!menus.length){
                    this.$router.replace('/login')
                    return
                }
                localStorage.setItem('userRoutes',JSON.stringify(userRoutes))
                localStorage.setItem('menus',JSON.stringify(menus))
                userRoutes=setUserRoutesData([...userRoutes])
                this.$store.dispatch('setUserRoutes',userRoutes)
                this.$store.dispatch('setMenus',menus)
                this.$router.addRoutes([...userRoutes])
                this.$router.replace((userRoutes[0] && userRoutes[0].path) ? userRoutes[0].path : '/404')
            }
        },

    }
</script>

<style scoped lang="scss">
    .loadingBox{
        .loadingContentbox{
            position: absolute;
            left:50%;
            top:50%;
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            .el-icon-loading{
                font-size: 40px;
                margin-bottom:10px;
            }
        }
    }
</style>

8.寫篩選菜單和路由的方法

到utils，global-methods.js中寫菜單篩選和路由數據方法
首先我們假設后端返回的數據為如下結構（僅列出關鍵字段）

[
  {
    label:'人員管理',
    path:'/person',
    isLeftMenu:1,
    routeName:'Person',
    isContainer:1,
    children:[
     {
        label:'人員列表',
        path:'/person/person-list',
        routeName:'PersonList',
         isLeftMenu:1,
         component:'/person/person-list',
    },
     {
        label:'新增人員',
        path:'/person/person-add',
        routeName:'PersonAdd',
         component:'/person/person-add',
         isLeftMenu:0
     }
    ]
  },
    {
      label:'訂單管理',
      path:'/order',
      isLeftMenu:1,
      routeName:'Order',
       component:'/order/order',
      isContainer:0,
    }
]

其中 label 為菜單顯示標題，path 是路由路徑，isLeftMenu用于區分是否為菜單，這里isLeftMenu=1表示是菜單，routeName路由名,isContainer用于區分路由是否經過容器組件layout，這里isContainer=1表示使用layout容器,component用于指定組件引入的路徑
根據上面的數據結構，我們新建好對應得vue文件
結構如下圖：

在這里插入圖片描述

// 公共函數模塊,用import引用
// 根據日期時間值獲取字符串各是日期
import Layout from '../views/layout/layout'

//獲取并篩選菜單
export const getAndFilterMenus=(menus)=> {
    // console.log(menus)
    menus=hanldeChildAppRoute(menus)
    for(let i=0;i<menus.length;i++){
        delete menus[i].component
        //只有leLeftMeu=1的是菜單
        if(!parseInt(menus[i].isLeftMenu)){
            menus.splice(i,1)
            i--
        }
        if(menus[i] && menus[i].children){
            getAndFilterMenus(menus[i].children)
        }
    }
    return menus
}
//處理用戶路由數據
export const setUserRoutesData=(routes,isChild)=>{
    // console.log(routes)
    !isChild && (routes=hanldeChildAppRoute(routes))
    for(let i=0;i<routes.length;i++){
        let {component,isContainer,routeName,keepAlive}=routes[i]
        // console.log(routes[i])
        //如果指定使用路由容器組件layout，即isContainer=1，那么路由的component值就是Layout組件
        if(parseInt(isContainer)){
            routes[i].component=Layout
        }else{
        //不使用容器組件的，根據component用Import動態引入
            routes[i].component= () => import( `../views${component}`)
        }
        routes[i].name=routeName
        /**
        如果有子路由，那就用遞歸繼續生成路由
        **/
        if((routes[i].children instanceof Array) && routes[i].children.length){
            setUserRoutesData(routes[i].children,isChild)
        }
    }
    return routes
}

9. 登錄成功后生成路由

最后看下登錄頁，我們將在登錄成功后獲取菜單數據，然后動態生成頁面路由，并且通過Vue路由的addRoutes方法將路由添加到VueRouter中

<template>
    <div class="login-wrap">
        <div class="loginContent">
            <div class="rowBtween loginFormBox">
                <el-form :model="loginForm" :rules="rules" ref="loginForm" class="loginForm">
                    <el-row class="loginTitleBox">
                        <span class="loginTitle font20">登錄/Login</span>
                    </el-row>
                    <el-row>
                        <lm-form-item-col :span="24" v-model.number="loginForm.username" prefix-icon="el-icon-user" placeholder="請輸入用戶名" prop="username" width="300"/>
                    </el-row>
                    <el-row>
                        <lm-form-item-col :span="24" type="password" v-model="loginForm.password" prefix-icon="el-icon-lock" placeholder="請輸入登錄密碼" prop="password" width="300"/>
                    </el-row>
                    <div class="rowCenter loginBtnBox" >
                        <div class="loginBtn rowCenter font16" @click="submitForm">
                            <span>登錄</span>
                            <div v-if="showLoading">
                                <span>中</span>
                                <i class="el-icon-loading"></i>
                            </div>
                        </div>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
    import {mapState} from 'vuex'
    import axios from 'axios'
    import {reqUserRoutes} from "../../api/common";
    import {setUserRoutesData,getAndFilterMenus,} from "../../utils/global-methods";
    import {resetRouter} from '../../router'
    import baseRoutes from '../../router/base-router'
    export default {
        data() {
            return {
                loginForm: {},
                rules: {
                    username: [ { required: true, message: '請輸入用戶名', trigger: 'blur' } ],
                    password: [ { required: true, message: '請輸入密碼', trigger: 'blur' }, ],
                },//規則
                showLoading:false,//是否顯示加載
            }
        },
        methods: {
            //登錄
            async submitForm() {
                sessionStorage.clear()//清除所有緩存
                localStorage.clear()
                await this.$refs.loginForm.validate()
                this.showLoading=true
                axios({
                    url:`/login`,
                    method:'POST',
                    data:this.loginForm
                }).then(async response=>{
                    console.log(response)
                    if(response){
                        let userRoutes=await reqUserRoutes()
                        localStorage.setItem(userRoutes,JSON.stringify(userRoutes))
                        userRoutes=setUserRoutesData(JSON.parse(JSON.stringify(userRoutes)))
                        console.log(userRoutes)
                        this.$store.dispatch('setUserRoutes',JSON.parse(JSON.stringify(userRoutes)))
                        let menus=getAndFilterMenus([...baseRoutes,...JSON.parse(JSON.stringify(userRoutes))])
                        localStorage.setItem(menus,JSON.stringify(menus))
                        //重置路由
                        resetRouter()
                        // console.log(router)
                        //通過addRoutes方法添加路由
                        this.$router.addRoutes([...userRoutes])
                        // console.log(router)
                        將菜單存到vuex
                        this.$store.dispatch('setMenus',menus)
                        if(!menus.length || !userRoutes.length){
                            return
                        }
                        setTimeout(()=>{
                            router.replace(path)
                        },500)
                    }
                }).catch(error=>{
                    console.error(error)
                    this.showLoading=false
                })

            },
        },
    };
</script>
<style lang="scss" scoped>
    .login-wrap{
        position: relative;
        background:#111111;
        height:100vh;
        overflow: hidden;
        .loginContent{
            .loginFormBox{
                position: absolute;
                left:50%;
                top:50%;
                -webkit-transform: translate(-50%,-50%);
                -moz-transform: translate(-50%,-50%);
                -ms-transform: translate(-50%,-50%);
                -o-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
                .loginForm{
                    width:300px;
                    padding:20px;
                    .loginTitleBox{
                        margin-bottom:36px;
                        .loginTitle{
                            color:#ffffff;

                        }
                    }

                    .loginBtnBox{
                        width:100%;
                        margin-top:5vh;
                        .loginBtn{
                            width:100%;
                            height:40px;
                            background:linear-gradient(90deg,rgba(15,70,193,1),rgba(0,147,168,1));
                            border-radius:4px;
                            color:#ffffff;
                            cursor:pointer;
                        }
                    }
                }
            }

        }
    }

</style>
<style>
    .login-wrap .el-input{
        border-bottom: 1px solid;
        border-image: -webkit-linear-gradient(90deg,rgba(1,233,189,1) 0%,rgba(0,124,222,1) 100%) 30 30;
        border-image: -moz-linear-gradient(90deg,rgba(1,233,189,1) 0%,rgba(0,124,222,1) 100%) 30 30;
        border-image: linear-gradient(90deg,rgba(1,233,189,1) 0%,rgba(0,124,222,1) 100%) 30 30;
    }
    .login-wrap .el-input__inner{
        background:transparent;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        border:none;
        color:#ffffff;
    }
    .login-wrap .el-input-group__append{
        padding:0 !important;
        border:none !important;
        background:transparent !important;
    }

</style>