2、詳解

​整體思路為：登陸 > 成功後根據使用者資訊獲取選單 > 根據選單生成路由資訊

2.1、新增asyncRoutes路由

​在vue-router路徑src\router\index.js中新增asyncRoutes陣列，用來存放後端獲取的選單對應的路由資訊。

export const asyncRoutes = [
  { path: '*',redirect: '/404',hidden: true }http://www.cppcns.com
]

constantRoutes和asyncRoutes的區別

constantRoutes：不需要動態判斷許可權的路由，如登入頁、404等通用頁面。

asyncRoutes：需求動態判斷許可權並通過addRoutes動態新增的頁面

2.2、新建permission.js檔案

​在vuex路徑src\store\modules\permission.js下新建permission.js檔案，該操作為最重要的一步，主要是從後端查詢選單並生成路由。

import { asyncRoutes,constantRoutes } from '@/router'
import { fetchUserMenuList } from '@/api/user'
import Layout from '@/layout'

/**
 * 靜態路由懶載入
 * @param view  格式必須為 xxx/xxx 開頭不要加斜槓
 * @returns 
 */
export const loadView = (view) => {
  return (resolve) => require([`@/views/${view}.vue`],resolve)
}

/**
 * 把從後端查詢的選單資料拼裝成路由格式的資料
 * @param routes
 * @param data 後端返回的選單資料
 */
export function generaMenu(routes,data) {
  data.forEach(item => {
    const menu = {
      path: item.url,component: item.component === '#' ? Layout : loadView(item.component),hidden: item.status === 0,// 狀態為0的隱藏
      redirect: item.redirect,children: [],name: item.code,meta: item.meta
    }

    if (item.children) {
 
 
程式設計客棧     generaMenu(menu.children,item.children)
    }
    routes.push(menu)
  })
  return routes
}

const state = {
  routes: [],addRoutes: []
}

const mutations = {
  SET_ROUTES: (state,routes) => {
    state.addRoutes = routes
    // 拼接靜態路由和動態路由
    state.routes = constantRoutes.concat(routes)
  }
}

const actions = {
  generateRoutes({ commit },token) {
    return new Promise(resolve => {
      // 通過token從後端獲取使用者選單，並加入全域性狀態
      fetchUserMenuList(token).then(res => {
        const menuData = Object.assign([],res.data)
        const tempAsyncRoutes = Object.assign([],asyncRoutes)
        const accessedRoutes = generaMenu(tempAsyncRoutes,menuData)

        commit('SET_ROUTES',accessedRoutes)
        resolve(accessedRoutes)
      }).catch(error => {
        console.log(error)
      })
    })
  }
}

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

2.3、在vuex中註冊permission模組

​如果使用的是vue-element-admin請跳過此步，因為它在src\store\index.js中自動註冊了src\store\modules下的所有模組。如果你使用的是vue-element-template，可以參考admin，將index.js檔案改造一下，也可以手動import一下。

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules',true,/\.js$/)

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules,modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/,'$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
},{})

const store = new Vuex.Store({
  modules,getters
})

export default store

2.4、在getters中增加路由狀態

​在vuex路徑src\store\getters.js新增menusRoutes狀態

menusRoutes: state => state.permission.routes

2.5、修改選單生成資料來源

​在路徑src\layout\components\Sidebar\index.vue修改routes資料來源，原來資料來源是路由，改為從vuex中獲取。http://www.cppcns.com

routes() {
      // return this.$router.options.routes
      return this.$store.getters.menusRoutes
    },

​至此，從後端獲取選單資料到頁面展示的邏輯已經完畢，下面開始在登陸後進行呼叫。

2.6、登陸後獲取選單

​在vuex路徑src\store\modules\user.js的login方法中，加入登陸成功通過token獲取選單生成路由邏輯。

 // 獲取選單,呼叫其他檔案中actions時必須加 { root: true }
          dispatch('permission/generateRoutes',data,{ root: true }).then((accessRoutes) => {
            router.addRoutes(accessRoutes)
          })

2.7、解決重新整理後頁面空白

​以上內容已經可以實現登陸後展示左側選單功能，但是會發現每次重新整理頁面後，頁面都會變空白。這是因為在頁面重新整理時，會重新載入vue例項，vuex的store中的資料會被重新賦值，導致我們存在vuex中的路由資訊被程式設計客棧清空。

​在src\permission.js中增加重新獲取路由程式碼。

const accessRoutes = await store.dispatch('permiss程式設計客棧ion/generateRoutes',store.getters.token)
          router.addRoutes(accessRoutes)
          next({ ...to,replace: true })

3、總結

​至此根據使用者資訊動態獲取選單內容已經全部完成。

到此這篇關於使用vue-element-admin框架從後端動態獲取選單的文章就介紹到這了,更多相關vue-element-admin動態獲取選單內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！