关于动态路由

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");