主要用到 vuex、router.beforeEach、router.addRoutes()。vuex 的使用方法可以看我的另一篇博客：vue筆記（四）vuex。

順便安利一個 在線視頻轉gif圖。

因為第一次用到 router.addRoutes()，在做這個需求的時候遇到了很多問題，這里給大家幾個鏈接，如果碰到了可以點擊查看：
1. import 加載組件失敗： import() 動態加載component組件失敗 ；

2. 路由顯示結果正確，但是頁面總是跳轉到 404 頁面： vue 路由權限 頁面刷新時報404問題；

3. 每次進入頁面時，總是報 name 重復的警告：掘金上的 “luichooy”發表的 vue-router之addRoutes使用遇到的坑，這篇文章對 addRoutes 如何產生這個問題解釋挺詳細的，但是代碼不夠詳細，我是參考了“學如逆水，不進則退”寫的 解決addRoutes后重新登錄路由重復警告問題 解決的。

---

使用vuex 寫導航欄

在寫靜態導航欄時通常會新建一個文件作為組件，數據則是由 this.$router.options.routes 獲取。現在我們的路由信息不是從 router 中獲取到的，而是從后臺獲取的，我們暫時先把獲取到的這個數據 命名為 menuList，存放在 vuex 中的 state 中。具體代碼如下：

思路：

在 state 中定義一個初始變量 menuList: []，在 actions 中處理請求數據，在 mutations 中將請求到的數據賦值給 state 中的 menuList。

在組件中獲取 state 中處理好的數據。使用 mapGetters 。

由于刷新地址，vuex 中的數據會恢復成初始值，使用 router.beforeEach 進行監聽，若地址刷新，重新請求數據，使用 $store.dispatch()；

1. 登錄成功后，發起菜單請求

login(){let userInfo = {token: "ERRR",userCode: "admin",userAccount: "管理員"}sessionStorage.setItem("userInfo", JSON.stringify(userInfo));//dispatch中 userInfo 數據可傳可不傳，因為刷新的時候，這個數據是拿不到的，總 要從 sessionStorage 中獲取this.$store.dispatch("INIT_MENU");this.$router.replace("/") }

2. 在 store 文件夾下新建 index.js、actions.js、mutations.js、state.js、getters.js。

后臺返回數據：（還有一些其他的 id 字段，咱也用不到，這里就不貼了，這個是個大家做一個參考）

{code: "0000",msg: "處理成功",router: [{ path: '/dealCenter',name: 'dealCenter',component: "MyLayout",meta:{ title: "處理中心", hidden: false },children: []}, {path: '/myWorkbench',name: 'myWorkbench',component: "MyLayout",meta:{ title: "我的工作臺", hidden: false },children: [{path: "workbenchOne",name: "workbench_one",meta: { title: "工作臺一" },component: "/myWorkbench/workbenchOne"},{path: "workbenchTwo",name: "workbench_two",meta: { title: "工作臺二" },component: "/myWorkbench/workbenchTwo"},{path: "workbenchThr",name: "workbench_thr",meta: { title: "工作臺三" },component: "/myWorkbench/workbenchThr"}]}] }

代碼：

文件名代碼描述index.jsstate.jsactions.jsmutations.jsgetters.js

import Vue from 'vue' import Vuex from 'vuex' import state from './state' import actions from './actions' import mutations from './mutations' import getters from './getters' Vue.use(Vuex); export default new Vuex.Store({state, mutations,actions,getters })	在 index.js 中引入 actions.js、state.js、mutations.js、getters等文件。
let state = {menuList: []} export default state;	給 menuList 定義一個初始值。
import {menu} from "@/components/commonJs/dealMenuData.js" "INIT_MENU": ( {commit} ) => {//調用獲取菜單的接口，將獲取到的值賦值給 routerArr。axios().then( res => {if( res.code === "0000"){commit("GET_MENU", menu(res.router))} else {commit("GET_MENU", []);}} }) export default actions;	這里的 menu() 是處理從接口中獲取到的數據的方法，將數據轉換成 routes 路由格式。
let mutations = {"GET_MENU"(state, paylod){state.menuList = paylod;} } export default mutations;	將在 actions.js 中處理好的數據賦值給 state 中的 menuList。
let getters = {menuList: (state)=>{return state.menuList;} } export default getters;	這里要注意，有else返回 [] 的時候和沒有else的區別

3. 處理從后臺獲取的數據，我在 components 下面新建了一個 commonJs 文件夾，commonJs 下面是 dealMenuData.js 。

這里根據你自己定義的 routes 路由格式進行改寫。要注意的是：404頁面要在 router.addRoutes() 中拼接，具體原因在 步驟5 中會提到。

import Vue from 'vue' import MyLayout from "@/components/MyLayout" import NotFound from '@/components/404' import router from "@/router" import {createRouter} from "@/router"function _import(str) { // views文件夾下的Home組件，傳入的格式為 'Home'return function (resolve) {require([`@/views${str}.vue`], resolve);}; }const menu = function (arr) { let result = [];//將數據進行處理if(arr.length!=0){for( let i=0; i<arr.length; i++){if( arr[i].children.length == 0 ){ //只有一個子菜單let oneSonArr = {path: "list",name: arr[i].name,meta: arr[i].meta,component: _import(arr[i].path +"/list")}Vue.set(arr[i].children, 0, oneSonArr);} else { //有多個子菜單for(let j=0; j<arr[i].children.length; j++){let sonArrs = {};sonArrs = Object.assign({}, sonArrs, {path: arr[i].children[j].path,name: arr[i].children[j].name,meta: arr[i].children[j].meta,component: _import(arr[i].children[j].component)});Vue.set(arr[i].children, j, sonArrs); }}result.push({path: arr[i].path,name: arr[i].name,component: MyLayout,redirect: arr[i].children.length == 1 ? arr[i].path+"/list" : arr[i].path +"/"+ arr[i].children[0].path,meta: arr[i].meta,children: arr[i].children})}}result.push({ path: "*",name: "notFound",meta: { hidden: true },component: NotFound})console.log("在處理函數dealMenuData.js中", router)router.matcher = createRouter().matcher; //清空addRoutes中之前存下的路由信息router.addRoutes(result)return result; }export {menu};

這一部分可以看一下“前端大蝦”的【VUE管理菜單權限】使用router.addRoutes。

4. 導航欄組件中使用：

<template><div>{{menuList}}</div> </template><script>import { mapGetters } from "vuex";export default {computed: mapGetters(["menuList"])} </script>

5. 在 router/index.js 中解決頁面刷新 menuList 數據被清空的問題：

這里需要注意一下：404 不能寫到路由，要在 addroutes 里進行拼接404這個路由。原因是在路由中寫 404 ，刷新時因為要調用菜單接口，當前路由下的頁面還沒有被加載進來，先讀取到了寫在 router 中的路由，所以會先找到 404頁。

import Vue from 'vue' import VueRouter from 'vue-router'import MyLayout from '@/components/MyLayout' import Login from '@/components/login/login.vue' import notFound from '@/components/404'import Store from "@/store" Vue.use(VueRouter)const routes = [{path: '/',name: 'Home',meta: { hidden: true },redirect: "/dealCenter"},{path: '/login',name: 'login',meta: { hidden: true },component: Login} ]// const router = new VueRouter({ // mode: 'history', // base: process.env.BASE_URL, // routes // })const createRouter = () => new VueRouter({mode: 'hash',base: process.env.BASE_URL, //根routes }); const router = createRouter(); export { createRouter };//重復點擊導航欄報錯 const routerPush = VueRouter.prototype.push; VueRouter.prototype.push = function (location) {return routerPush.call(this, location).catch(error => error) }router.beforeEach((to,from,next) => { //全局前置守衛//to: 將要進入目標的路由對象//form： 即將離開的目標路由對象//執行跳轉的下一步鉤子if(!to.name && !from.name){ Store.dispatch("INIT_MENU") } //刷新時，to.name和from.name都為nullif(!sessionStorage.getItem("userInfo")){ //判斷是否存在session值，若不存在表示沒有登錄if(to.name != "login"){ //判斷當前頁面是不是登錄頁next({name:"login"})} else {next();}} else {next();} })export default router

在router中寫404頁面后，刷新時的狀況如下圖：

用慢速將情景還原一下”：

總結

以上是生活随笔為你收集整理的vuex+element 从后台获取数据写导航栏-菜单权限的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。