本文大多內(nèi)容 摘抄自 https://www.cnblogs.com/smilexumu/p/10521612.html 此文章,但是這個(gè)文章有個(gè)小bug,第一次登錄不顯示菜單,不知道是不是作者寫(xiě)漏了 還是其他問(wèn)題。
本文進(jìn)行了bug修復(fù),實(shí)際測(cè)試可以使用。 只限2.5.0版本,其他版本沒(méi)測(cè)試過(guò)。
https://github.com/hequan2017/seal-vue/
[{
"path": '/multilevel',
"name": 'multilevel',
"meta": {
"icon": 'md-menu',
"title": '多級(jí)菜單'
},
"component": 'Main',
"children": [
{
"path": '/level_2_1',
"name": 'level_2_1',
"meta": {
"icon": 'md-funnel',
"title": '二級(jí)-1'
},
"component": 'multilevel/level-2-1'
},
]
}]
api/data.js
網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及定制網(wǎng)站建設(shè)服務(wù),專(zhuān)注于成都定制網(wǎng)頁(yè)設(shè)計(jì),高端網(wǎng)頁(yè)制作,對(duì)成都公路鉆孔機(jī)等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。專(zhuān)業(yè)網(wǎng)站設(shè)計(jì),網(wǎng)站優(yōu)化推廣哪家好,專(zhuān)業(yè)成都網(wǎng)站推廣優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。
export const getMockMenuData = () => {
return axios.request({
url: 'system/mock_menu',
method: 'post'
})
}
新建 src/libs/router-util.js ( 用于轉(zhuǎn)化請(qǐng)求的menus-data數(shù)據(jù)為能被vue識(shí)別的路由格式)
/**
* ①添
* @@新增 定義初始化菜單
*/
// import axios from 'axios'
import { getToken, localSave, localRead } from '@/libs/util'
// import config from '@/config'
import { lazyLoadingCop } from '@/libs/tools'
import { getMockMenuData } from '@/api/data'
import Main from '@/components/main' // Main 是架構(gòu)組件,不在后臺(tái)返回,在文件里單獨(dú)引入
import parentView from '@/components/parent-view' // 獲取組件的方法
import store from '@/store' // parentView 是二級(jí)架構(gòu)組件,不在后臺(tái)返回,在文件里單獨(dú)引入
// eslint-disable-next-line no-unused-vars
const _import = require('@/router/_import_' + process.env.NODE_ENV)
var gotRouter
// 初始化路由
export const initRouter = () => {
console.log('開(kāi)始初始化路由')
if (!getToken()) {
console.log('沒(méi)有獲取到token')
return
}
// 異步請(qǐng)求
/* axios.get(baseUrl+'/menuList',{
header:{'Authorization':getToken()}
}).then(res=>{
var menuData=res.data.data;
localSave('route',JSON.stringify(menuData));
gotRouter=formatMenu(menuData);
vm.$store.commit('updateMenuList',gotRouter);
}); */
var routerData
if (!gotRouter) {
getMockMenuData().then(res => {
routerData = res.data // 后臺(tái)拿到路由
console.log('保存到本地', routerData)
localSave('dynamicRouter', JSON.stringify(routerData)) // 存儲(chǔ)路由到localStorage
gotRouter = filterAsyncRouter(routerData) // 過(guò)濾路由,路由組件轉(zhuǎn)換
store.commit('updateMenuList', gotRouter)
dynamicRouterAdd()
})
} else {
gotRouter = dynamicRouterAdd()
}
return gotRouter
}
// 加載路由菜單,從localStorage拿到路由,在創(chuàng)建路由時(shí)使用
export const dynamicRouterAdd = () => {
let dynamicRouter = []
let data = localRead('dynamicRouter')
console.log('從本地加載出來(lái)', data)
if (!data) {
return dynamicRouter
}
dynamicRouter = filterAsyncRouter(JSON.parse(data))
return dynamicRouter
}
// @函數(shù): 遍歷后臺(tái)傳來(lái)的路由字符串,轉(zhuǎn)換為組件對(duì)象
export const filterAsyncRouter = asyncRouterMap => {
const accessedRouters = asyncRouterMap.filter(route => {
if (route.component) {
if (route.component === 'Main') {
// Main組件特殊處理
route.component = Main
} else if (route.component === 'parentView') {
// parentView組件特殊處理
route.component = parentView
} else {
// route.component = _import(route.component)
route.component = lazyLoadingCop(route.component)
}
}
if (route.children && route.children.length) {
route.children = filterAsyncRouter(route.children)
}
return true
})
return accessedRouters
}
src->libs->toos.js, 中添加 引入.vue組件的封裝函數(shù)`
export const lazyLoadingCop = file => require('@/view/' + file + '.vue').default
src-->router,中新增_import_development.j s和_import_production.js 為引入.vue組件的封裝
_import_development.js
module.default = file => require('@/view/' + file + '.vue').default // vue-loader at least v13.0.0+
_import_production.js
module.exports = file => () => import('@/view/' + file + '.vue')
vux部分updateMenuList更新菜單數(shù)據(jù) , src->store->module->app.js中的mutations添加 updateMenuList 操作 state中的 menuList:[] (添加)
state: {
menuList: []
},
getters: {
menuList: (state, getters, rootState) =>
getMenuByRouter(state.menuList, rootState.user.access),
errorCount: state => state.errorList.length
},
mutations: {
updateMenuList (state, routes) {
// 添接受前臺(tái)數(shù)組,刷新菜單
router.addRoutes(routes) // 動(dòng)態(tài)添加路由
state.menuList = routes
console.log('updateMenuList 添 menuList', state.menuList)
},
}
src->router->routers.js 主要是左側(cè)菜單的加入
import Main from '@/components/main'
import { dynamicRouterAdd } from '@/libs/router-util' // ①添 引入加載菜單
/**
* iview-admin中meta除了原生參數(shù)外可配置的參數(shù):
* meta: {
* title: { String|Number|Function }
* 顯示在側(cè)邊欄、面包屑和標(biāo)簽欄的文字
* 使用'{{ 多語(yǔ)言字段 }}'形式結(jié)合多語(yǔ)言使用,例子看多語(yǔ)言的路由配置;
* 可以傳入一個(gè)回調(diào)函數(shù),參數(shù)是當(dāng)前路由對(duì)象,例子看動(dòng)態(tài)路由和帶參路由
* hideInBread: (false) 設(shè)為true后此級(jí)路由將不會(huì)出現(xiàn)在面包屑中,示例看QQ群路由配置
* hideInMenu: (false) 設(shè)為true后在左側(cè)菜單不會(huì)顯示該頁(yè)面選項(xiàng)
* notCache: (false) 設(shè)為true后頁(yè)面在切換標(biāo)簽后不會(huì)緩存,如果需要緩存,無(wú)需設(shè)置這個(gè)字段,而且需要設(shè)置頁(yè)面組件name屬性和路由配置的name一致
* access: (null) 可訪問(wèn)該頁(yè)面的權(quán)限數(shù)組,當(dāng)前路由設(shè)置的權(quán)限會(huì)影響子路由
* icon: (-) 該頁(yè)面在左側(cè)菜單、面包屑和標(biāo)簽導(dǎo)航處顯示的圖標(biāo),如果是自定義圖標(biāo),需要在圖標(biāo)名稱(chēng)前加下劃線'_'
* beforeCloseName: (-) 設(shè)置該字段,則在關(guān)閉當(dāng)前tab頁(yè)時(shí)會(huì)去'@/router/before-close.js'里尋找該字段名對(duì)應(yīng)的方法,作為關(guān)閉前的鉤子函數(shù)
* }
*/
// 不作為Main組件的子頁(yè)面展示的頁(yè)面單獨(dú)寫(xiě)
export const otherRouter = [{
path: '/login',
name: 'login',
meta: {
title: 'Login - 登錄',
hideInMenu: true
},
component: () => import('@/view/login/login.vue')
}, {
path: '/401',
name: 'error_401',
meta: {
hideInMenu: true
},
component: () => import('@/view/error-page/401.vue')
}, {
path: '/500',
meta: {
title: '500-服務(wù)端錯(cuò)誤'
},
name: 'error_500',
component: () => import('@/view/error-page/500.vue')
}
];
// 作為Main組件的子頁(yè)面展示但是不在左側(cè)菜單顯示的路由寫(xiě)在mainRouter里
export const mainRouter = [{
path: '/',
name: '_home',
redirect: '/home',
component: Main,
meta: {
hideInMenu: true,
notCache: true
},
children: [
{
path: '/home',
name: 'home',
meta: {
hideInMenu: true,
title: '首頁(yè)',
notCache: true,
icon: 'md-home'
},
component: () => import('@/view/single-page/home')
}
]
}, {
path: '/message',
name: 'message',
component: Main,
meta: {
hideInBread: true,
hideInMenu: true
},
children: [
{
path: 'message_page',
name: 'message_page',
meta: {
icon: 'md-notifications',
title: '消息中心'
},
component: () => import('@/view/single-page/message/index.vue')
}
]
}];
// 作為Main組件的子頁(yè)面展示并且在左側(cè)菜單顯示的路由寫(xiě)在appRouter里
export const appRouter = [...dynamicRouterAdd()];
export const routes = [
...otherRouter,
...mainRouter,
...appRouter
]
// 所有上面定義的路由都要寫(xiě)在下面輸出
export default routes
src/router/index.js
import { dynamicRouterAdd } from '@/libs/router-util'
const turnTo = (to, access, next) => {
if (canTurnTo(to.name, access, [...routes, ...dynamicRouterAdd()])) next()
// 有權(quán)限,可訪問(wèn)
else next({ replace: true, name: 'error_401' }) // 無(wú)權(quán)限,重定向到401頁(yè)面
}
src->main.js 實(shí)例化對(duì)象 添加掛載時(shí)的動(dòng)態(tài)路由調(diào)用
import { initRouter } from '@/libs/router-util' // 新增 引入動(dòng)態(tài)菜單渲染
new Vue({
el: '#app',
router,
i18n,
store,
render: h => h(App),
mounted() {
initRouter() // 新增 調(diào)用方法,動(dòng)態(tài)生成路由,
}
})
store/module/user.js
import { initRouter } from '@/libs/router-util' // ①新增 引入動(dòng)態(tài)菜單渲染
handleLogin ({ commit }, { userName, password }) {
userName = userName.trim()
return new Promise((resolve, reject) => {
login({
userName,
password
})
.then(res => {
const data = res.data
commit('setToken', data.token)
console.log('token', getToken())
initRouter() // 主要修改這里
resolve()
})
.catch(err => {
reject(err)
})
})
},
// 退出登錄
handleLogOut ({ state, commit }) {
return new Promise((resolve, reject) => {
logout(state.token)
.then(res => {
console.log('退出', res)
commit('setToken', '')
commit('setAccess', [])
localSave('dynamicRouter', []) // 主要修改這里 清空本地路由
resolve()
})
.catch(err => {
reject(err)
})
// 如果你的退出登錄無(wú)需請(qǐng)求接口,則可以直接使用下面三行代碼而無(wú)需使用logout調(diào)用接口
// commit('setToken', '')
// commit('setAccess', [])
// resolve()
})
},
本文名稱(chēng):iview-admin動(dòng)態(tài)菜單
鏈接URL:http://bm7419.com/article16/pciegg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供商城網(wǎng)站、云服務(wù)器、外貿(mào)建站、全網(wǎng)營(yíng)銷(xiāo)推廣、服務(wù)器托管、標(biāo)簽優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)