路由修复

src/layout/components/FixedHeader/components/MenuItem/index.vue

@@ -64,12 +64,9 @@ export default {
   data() {
     return {};
   },
-  mounted() {
-    console.log(this.item);
-  },
+  mounted() {},
   methods: {
     selectRouter(index, indexPath) {
-      console.log(index, "aaa");
       this.$router.push(index);
     },
     filterActiveCss(path) {

src/layout/components/FixedHeader/components/MenuMain/index.vue

@@ -54,6 +54,7 @@ export default {
         }
       });
       this.addParentId(this.topMenus, null);
+      this.$store.commit("SET_FIRST_ROUTER", this.topMenus[0].fullPath);
     },
     addParentId(tree, parentPath) {
       tree.forEach((node) => {
@@ -78,7 +79,6 @@ export default {
     },
 
     handlerRouter(key) {
-      console.log(key, "Path");
       if (this.ishttp(key)) {
         //说明创建路由选择的是外部链接
         window.open(key, "_blank");

src/store/getters.js

@@ -1,19 +1,20 @@
 const getters = {
-  sidebar: state => state.app.sidebar,
-  size: state => state.app.size,
-  device: state => state.app.device,
-  dict: state => state.dict.dict,
-  visitedViews: state => state.tagsView.visitedViews,
-  cachedViews: state => state.tagsView.cachedViews,
-  token: state => state.user.token,
-  avatar: state => state.user.avatar,
-  name: state => state.user.name,
-  introduction: state => state.user.introduction,
-  roles: state => state.user.roles,
-  permissions: state => state.user.permissions,
-  permission_routes: state => state.permission.routes,
-  topbarRouters:state => state.permission.topbarRouters,
-  defaultRoutes:state => state.permission.defaultRoutes,
-  sidebarRouters:state => state.permission.sidebarRouters,
-}
-export default getters
+  sidebar: (state) => state.app.sidebar,
+  size: (state) => state.app.size,
+  device: (state) => state.app.device,
+  dict: (state) => state.dict.dict,
+  visitedViews: (state) => state.tagsView.visitedViews,
+  cachedViews: (state) => state.tagsView.cachedViews,
+  token: (state) => state.user.token,
+  avatar: (state) => state.user.avatar,
+  name: (state) => state.user.name,
+  introduction: (state) => state.user.introduction,
+  roles: (state) => state.user.roles,
+  permissions: (state) => state.user.permissions,
+  permission_routes: (state) => state.permission.routes,
+  topbarRouters: (state) => state.permission.topbarRouters,
+  defaultRoutes: (state) => state.permission.defaultRoutes,
+  sidebarRouters: (state) => state.permission.sidebarRouters,
+  firstRouter: (state) => state.permission.firstRouter,
+};
+export default getters;

src/store/modules/permission.js

@@ -1,9 +1,9 @@
-import auth from '@/plugins/auth'
-import router, { constantRoutes, dynamicRoutes } from '@/router'
-import { getRouters } from '@/api/menu'
-import Layout from '@/layout/index'
-import ParentView from '@/components/ParentView'
-import InnerLink from '@/layout/components/InnerLink'
+import auth from "@/plugins/auth";
+import router, { constantRoutes, dynamicRoutes } from "@/router";
+import { getRouters } from "@/api/menu";
+import Layout from "@/layout/index";
+import ParentView from "@/components/ParentView";
+import InnerLink from "@/layout/components/InnerLink";
 
 const permission = {
   state: {
@@ -11,127 +11,131 @@ const permission = {
     addRoutes: [],
     defaultRoutes: [],
     topbarRouters: [],
-    sidebarRouters: []
+    sidebarRouters: [],
+    firstRouter: "",
   },
   mutations: {
     SET_ROUTES: (state, routes) => {
-      state.addRoutes = routes
-      state.routes = constantRoutes.concat(routes)
+      state.addRoutes = routes;
+      state.routes = constantRoutes.concat(routes);
     },
     SET_DEFAULT_ROUTES: (state, routes) => {
-      state.defaultRoutes = constantRoutes.concat(routes)
+      state.defaultRoutes = constantRoutes.concat(routes);
     },
     SET_TOPBAR_ROUTES: (state, routes) => {
-      state.topbarRouters = routes
+      state.topbarRouters = routes;
     },
     SET_SIDEBAR_ROUTERS: (state, routes) => {
-      state.sidebarRouters = routes
+      state.sidebarRouters = routes;
+    },
+    SET_FIRST_ROUTER: (state, routerFullpath) => {
+      state.firstRouter = routerFullpath;
     },
   },
   actions: {
     // 生成路由
     GenerateRoutes({ commit }) {
-      return new Promise(resolve => {
+      return new Promise((resolve) => {
         // 向后端请求路由数据
-        getRouters().then(res => {
-          const sdata = JSON.parse(JSON.stringify(res.data))
-          const rdata = JSON.parse(JSON.stringify(res.data))
-          const sidebarRoutes = filterAsyncRouter(sdata)
-          const rewriteRoutes = filterAsyncRouter(rdata, false, true)
+        getRouters().then((res) => {
+          const sdata = JSON.parse(JSON.stringify(res.data));
+          const rdata = JSON.parse(JSON.stringify(res.data));
+          const sidebarRoutes = filterAsyncRouter(sdata);
+          const rewriteRoutes = filterAsyncRouter(rdata, false, true);
           const asyncRoutes = filterDynamicRoutes(dynamicRoutes);
-          rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
+          rewriteRoutes.push({ path: "*", redirect: "/404", hidden: true });
           router.addRoutes(asyncRoutes);
-          commit('SET_ROUTES', rewriteRoutes)
-          commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
-          commit('SET_DEFAULT_ROUTES', sidebarRoutes)
-          commit('SET_TOPBAR_ROUTES', sidebarRoutes)
-          resolve(rewriteRoutes)
-        })
-      })
-    }
-  }
-}
+          commit("SET_ROUTES", rewriteRoutes);
+          commit("SET_SIDEBAR_ROUTERS", constantRoutes.concat(sidebarRoutes));
+          commit("SET_DEFAULT_ROUTES", sidebarRoutes);
+          commit("SET_TOPBAR_ROUTES", sidebarRoutes);
+          resolve(rewriteRoutes);
+        });
+      });
+    },
+  },
+};
 
 // 遍历后台传来的路由字符串，转换为组件对象
 function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
-  return asyncRouterMap.filter(route => {
+  return asyncRouterMap.filter((route) => {
     if (type && route.children) {
-      route.children = filterChildren(route.children)
+      route.children = filterChildren(route.children);
     }
     if (route.component) {
       // Layout ParentView 组件特殊处理
-      if (route.component === 'Layout') {
-        route.component = Layout
-      } else if (route.component === 'ParentView') {
-        route.component = ParentView
-      } else if (route.component === 'InnerLink') {
-        route.component = InnerLink
+      if (route.component === "Layout") {
+        route.component = Layout;
+      } else if (route.component === "ParentView") {
+        route.component = ParentView;
+      } else if (route.component === "InnerLink") {
+        route.component = InnerLink;
       } else {
-        route.component = loadView(route.component)
+        route.component = loadView(route.component);
       }
     }
     if (route.children != null && route.children && route.children.length) {
-      route.children = filterAsyncRouter(route.children, route, type)
+      route.children = filterAsyncRouter(route.children, route, type);
     } else {
-      delete route['children']
-      delete route['redirect']
+      delete route["children"];
+      delete route["redirect"];
     }
-    return true
-  })
+    return true;
+  });
 }
 
 function filterChildren(childrenMap, lastRouter = false) {
-  var children = []
+  var children = [];
   childrenMap.forEach((el, index) => {
     if (el.children && el.children.length) {
-      if (el.component === 'ParentView' && !lastRouter) {
-        el.children.forEach(c => {
-          c.path = el.path + '/' + c.path
+      if (el.component === "ParentView" && !lastRouter) {
+        el.children.forEach((c) => {
+          c.path = el.path + "/" + c.path;
           if (c.children && c.children.length) {
-            children = children.concat(filterChildren(c.children, c))
-            return
+            children = children.concat(filterChildren(c.children, c));
+            return;
           }
-          children.push(c)
-        })
-        return
+          children.push(c);
+        });
+        return;
       }
     }
     if (lastRouter) {
-      el.path = lastRouter.path + '/' + el.path
+      el.path = lastRouter.path + "/" + el.path;
       if (el.children && el.children.length) {
-        children = children.concat(filterChildren(el.children, el))
-        return
+        children = children.concat(filterChildren(el.children, el));
+        return;
       }
     }
-    children = children.concat(el)
-  })
-  return children
+    children = children.concat(el);
+  });
+  return children;
 }
 
 // 动态路由遍历，验证是否具备权限
 export function filterDynamicRoutes(routes) {
-  const res = []
-  routes.forEach(route => {
+  const res = [];
+  routes.forEach((route) => {
     if (route.permissions) {
       if (auth.hasPermiOr(route.permissions)) {
-        res.push(route)
+        res.push(route);
       }
     } else if (route.roles) {
       if (auth.hasRoleOr(route.roles)) {
-        res.push(route)
+        res.push(route);
       }
     }
-  })
-  return res
+  });
+  return res;
 }
 
 export const loadView = (view) => {
-  if (process.env.NODE_ENV === 'development') {
-    return (resolve) => require([`@/views/${view}`], resolve)
+  if (process.env.NODE_ENV === "development") {
+    return (resolve) => require([`@/views/${view}`], resolve);
   } else {
     // 使用 import 实现生产环境的路由懒加载
-    return () => import(`@/views/${view}`)
+    return () => import(`@/views/${view}`);
   }
-}
+};
 
-export default permission
+export default permission;

src/views/index.vue

@@ -1,12 +1,17 @@
 <template></template>
 
 <script>
+import { mapGetters } from "vuex";
 export default {
   data() {
     return {};
   },
+  computed: {
+    ...mapGetters(["firstRouter"]),
+  },
   mounted() {
-    this.$router.push("/system/role");
+    // console.log(this.firstRouter, "第一个路由");
+    this.$router.push(this.firstRouter);
   },
 };
 </script>