feat：跟换路由层级

src/App.vue

@@ -1,26 +1,12 @@
 <script>
-import SideMenu from '@/components/sideMenu.vue'
-
 export default {
-  name:'app',
-  components:{
-    SideMenu
-  },
-  methods:{
-    getInfo(){
-      this.$refs.sideMenu.updataUserInfo()
-    }
-  }
+  name:'app'
 }
 </script>
 
 <template>
   <div id="app">
-    <el-container v-if="$route.fullPath.indexOf('/login') === -1 && $route.fullPath.indexOf('/Create') === -1 && $route.fullPath.indexOf('/forgotpassword') === -1 && $route.fullPath.indexOf('/noadmin') === -1 && $route.fullPath.indexOf('/404') === -1">
-      <el-aside width="260px" class="relative"><SideMenu ref="sideMenu" /></el-aside>
-      <el-main><router-view :getInfo="getInfo" /></el-main>
-    </el-container>
-    <router-view v-else />
+    <router-view />
   </div>
 </template>
 

src/router/index.js

@@ -39,9 +39,96 @@ const router = new VueRouter({
       component: () => import("../views/Login.vue"),
     },
     {
-      path: "/dashboard",
-      name: "dashboard",
-      component: () => import("../views/Dashboard.vue"),
+      path: '',
+      name: 'container',
+      component: () => import("../views/Container.vue"),
+      children: [
+        {
+          path: "/dashboard",
+          name: "dashboard",
+          component: () => import("../views/Dashboard.vue"),
+        },
+        {
+          path: "/manage-team",
+          name: "ManageTeam",
+          component: () => import("../views/TeamManagement/ManageTeam.vue"),
+        },
+        {
+          path: "/manage-member",
+          name: "ManageMember",
+          component: () => import("../views/TeamManagement/ManageMember.vue"),
+        },
+        {
+          path: "/manage-member/edit-manage-member",
+          name: "EditManageMember",
+          component: () => import("../views/TeamManagement/ManageMember/EditManageMember.vue"),
+        },
+        {
+          path: "/manage-member/add-manage-member",
+          name: "AddManageMember",
+          component: () => import("../views/TeamManagement/ManageMember/AddManageMember.vue"),
+        },
+        {
+          path: "/manage-team/create-manage-team",
+          name: "CreateManageTeam",
+          component: () => import("../views/TeamManagement/ManageTeamOperate.vue"),
+        },
+        {
+          path: "/manage-team/edit-manage-team",
+          name: "EditManageTeam",
+          component: () => import("../views/TeamManagement/ManageTeamOperate.vue"),
+        },
+        {
+          path: "/settings",
+          name: "settings",
+          component: () => import("../views/Settings.vue"),
+        },
+        {
+          path: "/device",
+          name: "device",
+          component: () => import("../views/Device.vue"),
+        },
+        {
+          path: "/licenseManage",
+          name: "licenseManage",
+          component: () => import("../views/LicenseManage.vue"),
+        },
+        {
+          path: "/assignlicense",
+          name: "assignlicense",
+          component: () => import("../views/Assignlicense.vue"),
+        },
+        {
+          path: "/volumecancel",
+          name: "volumecancel",
+          component: () => import("../views/VolumeCancel.vue"),
+        },
+        {
+          path: "/productManagement",
+          name: "productManagement",
+          component: () => import("../views/ProductManagement.vue"),
+        },
+        {
+          path: "/manageAdmin",
+          name: "manageAdmin",
+          component: () => import("../views/ManageAdmin.vue"),
+        },
+        {
+          path: "/manageAdmin/addAdmin",
+          name: "addAdmin",
+          component: () => import("../views/MenageAdmin/addAdmin.vue"),
+        },
+        {
+          path: "/manageAdmin/editAdmin",
+          name: "editAdmin",
+          component: () => import("../views/MenageAdmin/editAdmin.vue"),
+        },
+        {
+          path: "/support",
+          name: "support",
+          component: () => import("../views/Support.vue"),
+        },
+      ]
     },
     {
       path: "/noadmin",
@@ -58,99 +145,16 @@ const router = new VueRouter({
       name: "forgotpassword",
       component: () => import("../views/forgotpassword.vue"),
     },
-    {
-      path: "/manage-team",
-      name: "ManageTeam",
-      component: () => import("../views/TeamManagement/ManageTeam.vue"),
-    },
-    {
-      path: "/manage-member",
-      name: "ManageMember",
-      component: () => import("../views/TeamManagement/ManageMember.vue"),
-    },
-    {
-      path: "/manage-member/edit-manage-member",
-      name: "EditManageMember",
-      component: () => import("../views/TeamManagement/ManageMember/EditManageMember.vue"),
-    },
-    {
-      path: "/manage-member/add-manage-member",
-      name: "AddManageMember",
-      component: () => import("../views/TeamManagement/ManageMember/AddManageMember.vue"),
-    },
-    {
-      path: "/manage-team/create-manage-team",
-      name: "CreateManageTeam",
-      component: () => import("../views/TeamManagement/ManageTeamOperate.vue"),
-    },
-    {
-      path: "/manage-team/edit-manage-team",
-      name: "EditManageTeam",
-      component: () => import("../views/TeamManagement/ManageTeamOperate.vue"),
-    },
-    {
-      path: "/settings",
-      name: "settings",
-      component: () => import("../views/Settings.vue"),
-    },
-    {
-      path: "/device",
-      name: "device",
-      component: () => import("../views/Device.vue"),
-    },
-    {
-      path: "/licenseManage",
-      name: "licenseManage",
-      component: () => import("../views/LicenseManage.vue"),
-    },
-    {
-      path: "/assignlicense",
-      name: "assignlicense",
-      component: () => import("../views/Assignlicense.vue"),
-    },
-    {
-      path: "/volumecancel",
-      name: "volumecancel",
-      component: () => import("../views/VolumeCancel.vue"),
-    },
-    {
-      path: "/productManagement",
-      name: "productManagement",
-      component: () => import("../views/ProductManagement.vue"),
-    },
-    {
-      path: "/manageAdmin",
-      name: "manageAdmin",
-      component: () => import("../views/ManageAdmin.vue"),
-    },
-    {
-      path: "/manageAdmin/addAdmin",
-      name: "addAdmin",
-      component: () => import("../views/MenageAdmin/addAdmin.vue"),
-    },
-    {
-      path: "/manageAdmin/editAdmin",
-      name: "editAdmin",
-      component: () => import("../views/MenageAdmin/editAdmin.vue"),
-    },
-    {
-      path: "/support",
-      name: "support",
-      component: () => import("../views/Support.vue"),
-    },
-    {
-      path: "/404",
+    { // 当没有匹配到正确路由的时候，匹配404组件
+      path: '*',
       name: "404",
       component: () => import("../views/notFind.vue"),
-    },
-    { // 当没有匹配到正确路由的时候，匹配login组件
-      path: '*',
-      redirect: "/404"
     }
   ],
 })
 router.beforeEach((to, from, next) => {
   const whiteList = '/login'
+  //路由守卫，进行权限判断
   if (to.path !== whiteList && to.path !== '/Create' && to.path !== '/noadmin' && to.path !== '/forgotpassword') {
     if (userStore().user.role?.indexOf("2") !== -1 || userStore().user.role?.indexOf("1") !== -1) {
       next()

src/views/Container.vue

@@ -0,0 +1,22 @@
+<script>
+import SideMenu from '@/components/sideMenu.vue'
+
+export default {
+  name:'container',
+  components: {
+    SideMenu
+  },
+  methods:{
+    getInfo(){
+      this.$refs.sideMenu.updataUserInfo()
+    }
+  }
+}
+</script>
+
+<template>
+  <el-container>
+    <el-aside width="260px" class="relative"><SideMenu ref="sideMenu" /></el-aside>
+    <el-main><router-view :getInfo="getInfo" /></el-main>
+  </el-container>
+</template>

src/views/Login.vue

@@ -74,16 +74,16 @@ export default {
                   setTimeout(() => {
                     if (this.$route.query.teamIds) {
                       this.teamIds = this.$route.query.teamIds.split(',')
+                      var urlencoded = new URLSearchParams()
+                      urlencoded.append('memberId', this.$route.query.memberId)
+                      urlencoded.append('teamIds', this.teamIds)
+                      urlencoded.append('action', this.$route.query.action)
+                      urlencoded.append('code', this.$route.query.code)
+                      post(
+                        '/pdf-tech/vppTeam/enterTeam',
+                        urlencoded
+                      ).then((res) => {})
                     }
-                    var urlencoded = new URLSearchParams()
-                    urlencoded.append('memberId', this.$route.query.memberId)
-                    urlencoded.append('teamIds', this.teamIds)
-                    urlencoded.append('action', this.$route.query.action)
-                    urlencoded.append('code', this.$route.query.code)
-                    post(
-                      '/pdf-tech/vppTeam/enterTeam',
-                      urlencoded
-                    ).then((res) => {})
                     get(
                       '/pdf-tech/vppMember/getMemberInfo'
                     ).then((res) => {

utils/request.js

@@ -56,6 +56,7 @@ instance.interceptors.response.use(
   (error) => {
     const { response } = error;
     if (response && response.data) {
+      //没有登录或者登录过期跳到登录页面
       if(response.data.code === 310 && response.data.msg === "无效的token或者token已过期"){
         window.location.href = '/login'
         this.$cookies.remove('accessToken')
@@ -64,6 +65,7 @@ instance.interceptors.response.use(
       return Promise.reject(error);
     }
     const { message } = error;
+    //断网情况下，弹出框
     if(error.request){
       msg = Message({
         duration: 0,