程序運行時，router只配置登陸 首頁404 等基本頁面
import Main from '@/views/Main.vue';
// 不作為Main組件的子頁面展示的頁面單獨寫，如下
export const loginRouter = {
path: '/login',
name: 'login',
meta: {
title: 'Login - 登錄'
},
component: resolve => { require(['@/views/login.vue'], resolve); }
};
export const page404 = {
path: '/*',
name: 'error-404',
meta: {
title: '404-頁面不存在'
},
component: resolve => { require(['@/views/error-page/404.vue'], resolve); }
};
export const page403 = {
path: '/403',
meta: {
title: '403-權限不足'
},
name: 'error-403',
component: resolve => { require(['@//views/error-page/403.vue'], resolve); }
};
export const page500 = {
path: '/500',
meta: {
title: '500-服務端錯誤'
},
name: 'error-500',
component: resolve => { require(['@/views/error-page/500.vue'], resolve); }
};
// 作為Main組件的子頁面展示但是不在左側菜單顯示的路由寫在otherRouter里
export const otherRouter = {
path: '/',
component: Main,
children: [
{ path: '/', title:'Home', name: 'home_index', component: resolve => { require(['@/views/page/home.vue'], resolve); } }
]
};
// 作為Main組件的子頁面展示並且在左側菜單顯示的路由寫在appRouter里
export const appRouter = [];
// 所有上面定義的路由都要寫在下面的routers里
export const routers = [
loginRouter,
otherRouter,
...appRouter,
page500,
page403
];
使用路由
import Vue from 'vue';
import iView from 'iview';
import Util from '../libs/util';
import VueRouter from 'vue-router';
import {routers,page404} from './router';
import Cookies from 'js-cookie';
import Main from '@/views/Main.vue';
import store from '@/store';
Vue.use(VueRouter);
// 路由配置
const RouterConfig = {
// mode: 'history',
routes: routers
};
export const router = new VueRouter(RouterConfig);
router.beforeEach((to, from, next) => {
iView.LoadingBar.start();
Util.title(to.meta.title);
if (!Cookies.get('user') && to.name !== 'login') { // 判斷是否已經登錄且前往的頁面不是登錄頁
next({
name: 'login'
});
} else if (Cookies.get('user') && to.name === 'login') { // 判斷是否已經登錄且前往的是登錄頁
Util.title();
next({
name: '/'
});
} else {
next();
}
});
router.afterEach((to) => {
iView.LoadingBar.finish();
window.scrollTo(0, 0);
});
登陸操作 獲取菜單 將菜單存到sessionStorage中，並且把菜單存儲到vuex中，因為vuex一刷新就沒了，所以要放在sessionStorage中
handleSubmit() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.$http.post('/api/login/login', this.form)
.then((data) => {
this.submitPedding = false
if (data.result) {
window.sessionStorage.clear();
this.$http.get('/api/Common/GetMenuTree')
.then((data) => {
window.sessionStorage.routes = JSON.stringify(data)
this.$store.commit('updateMenulist', data)
// let routes = this.generateRoutesFromMenu(data)
// for(var i = 0;i<routes.length;i++){
// this.$router.options.routes.push(routes[i]);
// }
// this.$router.addRoutes(this.$router.options.routes)
Cookies.set('user', this.form.userName);
this.$router.push({
path: '/'
});
})
} else {
switch (data.errorcode) {
case 1:
this.$Message.info({
content: '請輸入您的賬號',
duration: 10,
closable: true
});
break;
case 2:
this.$Message.info({
content: '請輸入您的密碼',
duration: 10,
closable: true
});
break;
case 3:
this.$Message.warning({
content: '用戶名或密碼錯誤',
duration: 10,
closable: true
});
break;
default:
this.$Message.info({
content: '登陸失敗，請稍后再試',
duration: 10,
closable: true
});
break;
}
}
})
}
});
},
返回格式：
{
"results": false,
"code": 0,
"msg": null,
"sub_code": null,
"sub_msg": null,
"data": [{
"path": "/ParcelReceiving",
"icon": "earth",
"title": "包裹收貨",
"component": null,
"children": [{
"path": "/ParcelReceiving/index",
"title": "Page",
"name": "opbgsh1",
"component": "ParcelReceiving"
}]
}, {
"path": "/ParcelProcessing",
"icon": "social-buffer",
"title": "包裹處理",
"component": null,
"children": [{
"path": "/ParcelProcessing/index",
"title": "Page",
"name": "opbgcl1",
"component": "ParcelProcessing"
}]
}, {
"path": "/CustomsEditor",
"icon": "clipboard",
"title": "海關信息",
"component": null,
"children": [{
"path": "/CustomsEditor/index",
"title": "Page",
"name": "ophgxx1",
"component": "CustomsEditor"
}]
}, {
"path": "/ParcelTransfer",
"icon": "ios-infinite",
"title": "包裹轉單",
"component": null,
"children": [{
"path": "/ParcelTransfer/index",
"title": "Page",
"name": "opbgzd1",
"component": "ParcelTransfer"
}]
}, {
"path": "/PackagingServices",
"icon": "archive",
"title": "打包封裝",
"component": null,
"children": [{
"path": "/PackagingServices/index",
"title": "Page",
"name": "opdbfz1",
"component": "PackagingServices"
}]
}, {
"path": "/ProblemPackageList",
"icon": "alert-circled",
"title": "問題包裹",
"component": null,
"children": [{
"path": "/ProblemPackageList/index",
"title": "Page",
"name": "opwtbg1",
"component": "ProblemPackageList"
}]
}, {
"path": "/ParcelSearch",
"icon": "search",
"title": "包裹查詢",
"component": null,
"children": [{
"path": "/ParcelSearch/index",
"title": "Page",
"name": "opbgcx1",
"component": "ParcelSearch"
}]
}, {
"path": "/TrayInquire",
"icon": "search",
"title": "托盤查詢",
"component": null,
"children": [{
"path": "/TrayInquire/index",
"title": "Page",
"name": "optpcx1",
"component": "TrayInquire"
}]
}, {
"path": "/TransferLabel",
"icon": "ios-infinite",
"title": "轉運單",
"component": null,
"children": [{
"path": "/TransferLabel/index",
"title": "Page",
"name": "opbgzyd1",
"component": "TransferLabel"
}]
}, {
"path": "/CategoryName",
"icon": "sad-outline",
"title": "品類管理",
"component": null,
"children": [{
"path": "/CategoryName/index",
"title": "品類列表",
"name": "opplgl1",
"component": "CategoryName"
}, {
"path": "/CategoryName/Add",
"title": "添加品類",
"name": "opplgl2",
"component": "CategoryNameAdd"
}, {
"path": "/CategoryName/Prohibited",
"title": "禁運品名",
"name": "opplgl3",
"component": "ProhibitedCategory"
}]
}, {
"path": "/SystemPlugs",
"icon": "android-download",
"title": "系統設置",
"component": null,
"children": [{
"path": "/SystemPlugs/index",
"title": "Page",
"name": "opxtsz1",
"component": "SystemPlugs"
}]
}]
}
其中component存儲的是字符串 需要轉換為引入 vue組件 修改router.index 在使用前 修改配置
import Vue from 'vue';
import iView from 'iview';
import Util from '../libs/util';
import VueRouter from 'vue-router';
import {routers,page404} from './router';
import Cookies from 'js-cookie';
import Main from '@/views/Main.vue';
import store from '@/store';
Vue.use(VueRouter);
// 路由配置
const RouterConfig = {
// mode: 'history',
routes: routers
};
//避免刷新后 菜單清空
let menus = window.sessionStorage.routes //登錄成功返回的菜單
if (menus != null && menus != "null" && menus.length != 0) {
let items = JSON.parse(menus)
store.commit('updateMenulist', items)
let routes = generateRoutesFromMenu(items)
for(var i = 0;i<routes.length;i++){
routers.push(routes[i]);
}
}
routers.push(page404)
function generateRoutesFromMenu(menu = [], routes = []) {
for (let i = 0; i < menu.length; i++) {
menu[i].component = require('../views/Main.vue');
for(let j = 0;j<menu[i].children.length;j++){
let filePath = menu[i].children[j].component
menu[i].children[j].component = require('../views/page/' + filePath + '.vue');
}
routes.push(menu[i])
}
return routes
}
export const router = new VueRouter(RouterConfig);
router.beforeEach((to, from, next) => {
iView.LoadingBar.start();
Util.title(to.meta.title);
if (!Cookies.get('user') && to.name !== 'login') { // 判斷是否已經登錄且前往的頁面不是登錄頁
next({
name: 'login'
});
} else if (Cookies.get('user') && to.name === 'login') { // 判斷是否已經登錄且前往的是登錄頁
Util.title();
next({
name: '/'
});
} else {
next();
}
});
router.afterEach((to) => {
iView.LoadingBar.finish();
window.scrollTo(0, 0);
});
menu[i].children[j].component = require('../views/page/' + filePath + '.vue'); 這里 前面的路徑 和后面的.vue不可少，意思是讓webpack到views下面的page下面去找.vue結尾的文件。
404路由 要加到最后 否則路由先找到*的 以后的就不執行了。
store中
const app = {
state: {
menuList: [],
routers: [
otherRouter,
...appRouter
]
},
mutations: {
updateMenulist (state,menu) {
state.menuList = menu;
}
}
};
左側菜單遍歷 store中的menuList
<template>
<div>
<template v-for="(item, index) in menuList">
<div style="text-align: center;" :key="index">
<Dropdown transfer v-if="item.children.length !== 1" placement="right-start" :key="index" @on-click="changeMenu">
<Button style="width: 70px;margin-left: -5px;padding:10px 0;" type="text">
<Icon :size="20" :color="iconColor" :type="item.icon"></Icon>
</Button>
<DropdownMenu style="width: 200px;" slot="list">
<template v-for="(child, i) in item.children">
<DropdownItem :name="child.name" :key="i"><Icon :type="child.icon"></Icon><span style="padding-left:10px;">{{ itemTitle(child) }}</span></DropdownItem>
</template>
</DropdownMenu>
</Dropdown>
<Dropdown transfer v-else placement="right-start" :key="index" @on-click="changeMenu">
<Button @click="changeMenu(item.children[0].name)" style="width: 70px;margin-left: -5px;padding:10px 0;" type="text">
<Icon :size="20" :color="iconColor" :type="item.icon"></Icon>
</Button>
<DropdownMenu style="width: 200px;" slot="list">
<DropdownItem :name="item.children[0].name" :key="'d' + index"><Icon :type="item.icon"></Icon><span style="padding-left:10px;">{{ itemTitle(item.children[0]) }}</span></DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
</template>
</div>
</template>
至此 權限從后台讀取，到前台頁面展示就完成了，頁面內部每次刷新 都會重新從sessionStorage中獲取重新賦值。