1、appvue中渲染menu列表
export default {
name: "App",
data() {
return {
showType: false, // 是否显示菜单栏 默认不显示
isCollapes: false, // 展开与收缩 默认展开
// logo: require("./assets/image/login/logo.png"),
activePage: 0, // 当前高亮显示栏目
activelevel: 0, // 当前高亮显示栏目
menuSet: false, // 菜单栏目设置完毕 默认没有
menuList: [
{
name: "高校详情",
url: "/details",
pic: require("./assets/image/common/menu-1.png"),
apic: require("./assets/image/common/menu-1-1.png"),
},
{
name: "3D校园",
url: "/univcampus",
pic: require("./assets/image/common/menu-2.png"),
apic: require("./assets/image/common/menu-2-1.png"),
},
{
name: "视频专栏",
url: "/video",
pic: require("./assets/image/common/menu-3.png"),
apic: require("./assets/image/common/menu-3-1.png"),
},
{
name: "新闻专栏",
url: "/article",
pic: require("./assets/image/common/menu-4.png"),
apic: require("./assets/image/common/menu-4-1.png"),
},
{
name: "招生录取",
url: "/recruit",
pic: require("./assets/image/common/menu-5.png"),
apic: require("./assets/image/common/menu-5-1.png"),
},
{
name: "院系专业",
url: "/majors",
pic: require("./assets/image/common/menu-6.png"),
apic: require("./assets/image/common/menu-6-1.png"),
},
{
name: "人物专栏",
url: "/figure",
pic: require("./assets/image/common/menu-7.png"),
apic: require("./assets/image/common/menu-7-1.png"),
},
{
name: "招考问答",
url: "/recruiteQA",
pic: require("./assets/image/common/menu-8.png"),
apic: require("./assets/image/common/menu-8-1.png"),
},
{
name: "权限设置",
url: "/administ",
pic: require("./assets/image/common/menu-9.png"),
apic: require("./assets/image/common/menu-9-1.png"),
},
2、创建独立的路由js文件并加以相对应的权限
export default [{
path: "/univList",
name: "UnivList",
component: () => import("../pages/univList/UnivList.vue"),
meta: {
umId: "9",
title: "高校列表",
},
},
{
path: "/details",
name: "Details",
component: () => import("../pages/univdetails/UnivDetails.vue"),
children: [{
path: "",
name: "UdBasic",
component: () => import("../pages/univdetails/UdBasic.vue"),
meta: {
title: "基础信息",
},
},
{
path: "intro",
name: "UdIntro",
component: () => import("../pages/univdetails/UdIntro.vue"),
meta: {
title: "学校简介",
},
},
{
path: "history",
name: "UdHistory",
component: () => import("../pages/univdetails/UdHistory.vue"),
meta: {
title: "历史沿革",
},
},
{
path: "contact",
name: "Contact",
component: () => import("../pages/univdetails/UdContact.vue"),
meta: {
title: "联系我们",
},
},
{
path: "scenery",
name: "UdScenery",
component: () => import("../pages/univdetails/UdScenery.vue"),
meta: {
title: "校园风光",
},
},
],
meta: {
umId: "1",
title:'高校详情'
},
},
{
path: "/univcampus",
name: "UnivCampus",
component: () => import("../pages/univcampus/UnivCampus.vue"),
meta: {
umId: "2",
title: "3D校园",
},
},
{
path: "/article",
name: "New",
component: () => import("../pages/news/New.vue"),
meta: {
umId: "3",
title: "新闻专栏",
},
},
{
path: "/recruit",
name: "recruit",
component: () => import("../pages/recruit/recruit.vue"),
meta: {
umId: "4",
title: "招生录取",
},
},
{
path: "/majors",
name: "majors",
component: () => import("../pages/majors/majors.vue"),
meta: {
umId: "5",
title: "院系专业",
},
},
{
path: "/recruiteQA",
name: "recruiteQA",
component: () => import("../pages/recruiteQA/recruiteQA.vue"),
meta: {
umId: "11",
title: "招考问答",
},
},
{
path: "/figure",
name: "figure",
component: () => import("../pages/figure/figure.vue"),
meta: {
umId: "6",
title: "人物专栏",
},
},
{
path: "/administ",
name: "administ",
component: () => import("../pages/administ/administ.vue"),
meta: {
title: "权限设置",
umId: "7"
},
},
{
//3D视图
path: "/visual",
name: "visual",
component: () => import("../pages/visual/visual.vue"),
meta: {
title: "3D",
umId: "2"
},
},
{
path: "/video",
name: "video",
component: () => import("../pages/video/video.vue"),
meta: {
title: "视频专栏",
umId: "12"
},
},
{
path: "/404",
name: "404",
component: () => import("../pages/NotFind.vue"),
meta: {
umId: "0"
},
},
{
path: "*",
redirect: "/404",
meta: {
umId: 0,
},
},
];
3、创建routerAdd.js文件用于筛选相对应的权限
登录时获取到的权限和所有的权限面面进行筛选,找出对应的进行添加
import router from "../router/index";
import routerCam from "../router/routerCam";
import {
sessionGet
} from "./myStorage";
export default function addRouterList() {
if (sessionGet('menuIds')) {2
let newa = sessionGet('menuIds').split(',');
console.log('newa',newa);
newa.unshift('0')
let newb = routerCam.filter(item => {
console.log('item',item.meta.umId);
return newa.indexOf(item.meta.umId) > -1;
});
console.log('B',newb);
router.options.routes = router.options.routes.concat(newb);
router.addRoutes(newb);
}
}
4、在main.js中进行路由的权限处理
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import {
getSelfUnivUser
} from '@/api/'
import "lib-flexible/flexible";
Vue.config.productionTip = false;
Vue.prototype.$bus = new Vue();
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
import ComDialog from "./components/common/ComDialog.vue";
import Cropper from "./components/common/Cropper";
Vue.component("com-dialog", ComDialog);
Vue.component("xt-crop-per", Cropper);
import {
clearStorage,
getToken
} from "@/utils/auth";
import {
sessionGet
} from "./utils/myStorage";
import addRouterList from "@/utils/routerAdd";
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title;
}
if (navigator.userAgent.indexOf("Trident") > -1 && to.path == "/notsupport") {
//不支持IE浏览器
clearStorage("Trident");
next()
} else if (to.path == "/login" || to.path == "/forget") {
console.log('info',JSON.parse(sessionGet('info')));
// console.log('', to.path);
// 登录页直接跳转
next();
} else {
console.log('', to.path, to.path == ' /login');
if (!getToken("gxuser")) {
next({
path: "/login"
}); // 当没有用户信息时 只能在在登录页活动
} else {
console.log(router.options.routes)
if (router.options.routes.length <=2) {
console.log('有')
if (sessionGet('menuIds')) {
console.log('进入 ');
addRouterList();
next({
path: to.path,
query: to.query
}); //路径正常时 正常调转
} else {
next({
path: "/login"
}); // 当没有用户信息时 只能在在登录页活动
}
} else if (to.name == "404") {
next({
path: "/univList"
}); // 路径错误时 页面跳回首页
} else {
next();
}
}
}
});
new Vue({
render: (h) => h(App),
router,
}).$mount("#app");