fix: 解决menu.js与router依赖layout冲突

src/component/SvgIcon/index.vue

@@ -7,7 +7,7 @@
 
 <script>
 // docs:https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
-import {isExternalUrl} from '@/util/menu';
+import {isExternalUrl} from '@/util/common';
 
 export default {
   name: 'SvgIcon',

src/layout/component/Sidebar/Link.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import {isExternalUrl} from '@/util/menu';
+import {isExternalUrl} from '@/util/common';
 
 export default {
   props: {

src/layout/component/Sidebar/SidebarItem.vue

@@ -30,7 +30,7 @@
 
 <script>
 import path from 'path';
-import {isExternalUrl} from '@/util/menu';
+import {isExternalUrl} from '@/util/common';
 import Item from './Item.vue';
 import AppLink from './Link.vue';
 import FixIOSBug from '@/layout/mixin/FixIOSBug';

src/router/guard.js

@@ -0,0 +1,49 @@
+import NProgress from 'nprogress';
+import store from '@/store';
+import {getPageTitle} from '@/util/common';
+import {getToken} from '@/util/token';
+
+/**
+ * 设置router的全局路由守卫
+ */
+function setGuard(router) {
+  router.beforeEach(async(to, from, next) => {
+    NProgress.start();
+    document.title = getPageTitle(to.meta.title);
+    // 从cookie获取，刷新后不丢失
+    const hasToken = getToken();
+    // 未登录
+    if (!hasToken) {
+      // 未登录时放通login
+      if (to.path === '/login') {
+        next();
+        return;
+      }
+      // 跳转login
+      next(`/login?redirect=${to.fullPath}`);
+      NProgress.done();
+      return;
+    }
+    const routes = store.getters.routes;
+    // 若没有设置routes
+    if (routes && routes.length === 0) {
+      // 获取menuList
+      const menuList = await store.dispatch('user/getInfo');
+      // 生成路由
+      const asyncRoutes = await store.dispatch('user/generateRoutes', menuList);
+      // 加载路由
+      router.addRoutes(asyncRoutes);
+      next({...to, replace: true});
+      NProgress.done();
+      return;
+    }
+    next();
+  });
+  router.afterEach(() => {
+    NProgress.done();
+  });
+}
+
+export {
+  setGuard
+};

src/router/index.js

@@ -5,54 +5,12 @@
 import Vue from 'vue';
 import Router from 'vue-router';
 import NProgress from 'nprogress';
-import store from '@/store';
-import {getPageTitle} from '@/util/common';
-import {getToken} from '@/util/token';
-import Layout from '@/layout';
-
-Vue.use(Router);
-
+import {constRoutes} from '@/router/route';
+import {setGuard} from '@/router/guard';
 // NProgress config
 NProgress.configure({showSpinner: false});
 
-/**
- * 固定路由
- */
-const constRoutes = [
-  {
-    path: '/login',
-    component: () => import('@/view/Login'),
-    hidden: true
-  },
-  {
-    path: '/404',
-    component: () => import('@/view/404'),
-    hidden: true
-  },
-  {
-    path: '/user_center',
-    component: Layout,
-    hidden: true,
-    children: [
-      {
-        path: '',
-        name: 'UserCenter',
-        component: () => import('@/view/UserCenter'),
-        meta: {title: '个人中心'}
-      }
-    ]
-  }
-];
-
-/**
- * home路由，需要修改redirect使用
- */
-const homeRoute = {path: '/', hidden: true};
-
-/**
- * 404兜底路由
- */
-const notFoundRoute = {path: '*', redirect: '/404', hidden: true};
+Vue.use(Router);
 
 /**
  * 创建router
@@ -74,49 +32,9 @@ function resetRouter() {
 
 const router = createRouter();
 
-/**
- * 全局路由守卫
- */
-router.beforeEach(async(to, from, next) => {
-  NProgress.start();
-  document.title = getPageTitle(to.meta.title);
-  // 从cookie获取，刷新后不丢失
-  const hasToken = getToken();
-  // 未登录
-  if (!hasToken) {
-    // 未登录时放通login
-    if (to.path === '/login') {
-      next();
-      return;
-    }
-    // 跳转login
-    next(`/login?redirect=${to.fullPath}`);
-    NProgress.done();
-    return;
-  }
-  const routes = store.getters.routes;
-  // 若没有设置routes
-  if (routes && routes.length === 0) {
-    // 获取menuList
-    const menuList = await store.dispatch('user/getInfo');
-    // 生成路由
-    const asyncRoutes = await store.dispatch('user/generateRoutes', menuList);
-    // 加载路由
-    router.addRoutes(asyncRoutes);
-    next({...to, replace: true});
-    NProgress.done();
-    return;
-  }
-  next();
-});
-router.afterEach(() => {
-  NProgress.done();
-});
+setGuard(router);
 
 export {
   router as default,
-  constRoutes,
-  homeRoute,
-  notFoundRoute,
   resetRouter
 };

src/util/menu.js → src/router/route.js

@@ -1,16 +1,45 @@
-/**
- * 菜单路由转换工具
- */
-import Layout from '@/layout';
 import {Message} from 'element-ui';
 import NProgress from 'nprogress';
+import Layout from '@/layout';
 
 /**
- * 是否是外部链接
+ * 固定路由
  */
-function isExternalUrl(path) {
-  return /^(https?:|mailto:|tel:)/.test(path);
-}
+const constRoutes = [
+  {
+    path: '/login',
+    component: () => import('@/view/Login'),
+    hidden: true
+  },
+  {
+    path: '/404',
+    component: () => import('@/view/404'),
+    hidden: true
+  },
+  {
+    path: '/user_center',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '',
+        name: 'UserCenter',
+        component: () => import('@/view/UserCenter'),
+        meta: {title: '个人中心'}
+      }
+    ]
+  }
+];
+
+/**
+ * home路由，需要修改redirect使用
+ */
+const homeRoute = {path: '/', hidden: true};
+
+/**
+ * 404兜底路由
+ */
+const notFoundRoute = {path: '*', redirect: '/404', hidden: true};
 
 /**
  * 后端menu转为路由
@@ -102,6 +131,8 @@ function convertAsyncRoutes(menuList) {
 }
 
 export {
-  isExternalUrl,
+  constRoutes,
+  homeRoute,
+  notFoundRoute,
   convertAsyncRoutes
 };

src/store/module/user.js

@@ -4,8 +4,8 @@
  */
 import {getInfo, login, logout} from '@/api/login';
 import {getToken, removeToken, setToken} from '@/util/token';
-import {constRoutes, homeRoute, notFoundRoute, resetRouter} from '@/router';
-import {convertAsyncRoutes} from '@/util/menu';
+import {resetRouter} from '@/router';
+import {constRoutes, convertAsyncRoutes, homeRoute, notFoundRoute} from '@/router/route';
 
 const getDefaultState = () => {
   return {

src/util/common.js

@@ -123,9 +123,17 @@ function formatTime(time, option) {
   }
 }
 
+/**
+ * 是否是外部链接
+ */
+function isExternalUrl(path) {
+  return /^(https?:|mailto:|tel:)/.test(path);
+}
+
 export {
   getPageTitle,
   queryToObject,
   parseTime,
-  formatTime
+  formatTime,
+  isExternalUrl
 };