面包屑切换同步更新路由

src/components/SvgIcon.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { defineProps, computed } from 'vue'
+import { computed } from 'vue'
 
 const props = defineProps({
   name: {

src/components/layout/components/navbar/index.vue

@@ -68,7 +68,7 @@ export default {
     })
 
     // 切换菜单状态
-    const changeCollapse = (value) => store.commit('getCollapse', value)
+    const changeCollapse = (value) => store.commit('setCollapse', value)
 
     watch(
       () => store.state.activeMenu,

src/components/layout/components/setting/index.js

@@ -54,7 +54,7 @@ export const _changeSetting = (params) => {
   settingThemes({ type, value })
   if (type === 'navbarType') {
     data.drawer = false
-    store.commit('getNavbarType', value)
+    store.commit('setNavbarType', value)
   }
 }
 

src/components/layout/components/sidebar/SidebarItem.vue

@@ -16,6 +16,7 @@
 <script>
 import { setTabs, getTabs } from 'utils/storage.js'
 import { useStore } from 'vuex'
+import { useRouter } from 'vue-router'
 
 export default {
   props: {
@@ -24,6 +25,7 @@ export default {
   },
   setup() {
     const store = useStore()
+    const router = useRouter()
     // 点击菜单回调
     const handleMenu = (obj) => {
       const { menuId, menuName } = obj
@@ -38,10 +40,12 @@ export default {
         tabs.push({
           id: menuId,
           name: menuName,
+          path: obj.path,
           active: true
         })
       }
-      store.commit('getActiveMenu', menuId)
+      router.push({path: obj.path})
+      store.commit('setActiveMenu', menuId)
       setTabs(tabs, menuId)
     }
 

src/components/layout/components/sidebar/index.vue

@@ -41,9 +41,9 @@ export default {
           menuName: '导航一',
           path: '',
           children: [
-            { menuId: '111-1', menuName: '选项1', path: '', children: [] },
-            { menuId: '111-2', menuName: '选项2', path: '', children: [] },
-            { menuId: '111-3', menuName: '选项3', path: '', children: [] },
+            { menuId: '111-1', menuName: '选项1', path: '/home', children: [] },
+            { menuId: '111-2', menuName: '选项2', path: '/test', children: [] },
+            { menuId: '111-3', menuName: '选项3', path: '/', children: [] },
             {
               menuId: '111-4',
               menuName: '这是选项4哦',

src/components/layout/components/tabs/index.vue

@@ -63,7 +63,8 @@
 <script>
 import { reactive, toRefs, ref, watch } from 'vue'
 import { ArrowDown, Close, Download, DocumentRemove, DocumentDelete } from '@element-plus/icons'
-import { setTabs, getTabs } from 'utils/storage.js'
+import { setTabs, getTabs, getBreadcrumb } from 'utils/storage.js'
+import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 export default {
   components: {
@@ -75,6 +76,7 @@ export default {
   },
   setup() {
     const store = useStore()
+    const router = useRouter()
     const data = reactive({
       left: 0,
       tabs: getTabs(),
@@ -117,9 +119,11 @@ export default {
 
     // 点击tab
     const handleTag = (obj) => {
-      store.commit('getActiveMenu', obj.props.name)
+      store.commit('setActiveMenu', obj.props.name)
       setTabs(data.tabs, obj.props.name)
+      console.log(obj.props.name)
       judgeTabs()
+      router.push({path: getCurrentPath(obj.props.name)})
     }
 
     // 关闭tab
@@ -137,6 +141,7 @@ export default {
       } else {
         data.tabs.splice(idx, 1)
         setTabs(data.tabs)
+        gotoCurrentPath()
         judgeTabs()
       }
     }
@@ -153,21 +158,44 @@ export default {
         currentIdx = currentIdx > 0 ? currentIdx - 1 : currentIdx + 1
         menuId = tabs[currentIdx]?.id ?? ''
         tabs = tabs.filter((item) => !item.active)
-        store.commit('getActiveMenu', menuId)
+        store.commit('setActiveMenu', menuId)
       } else if (type === 'other') {
         tabs = tabs.filter((item) => item.active)
         data.tabs = tabs
       } else if (type === 'all') {
         tabs = tabs.filter((item) => item.unCloseable)
-        store.commit('getActiveMenu', '')
+        store.commit('setActiveMenu', '')
       } else {
         let len = tabs.length - 1
         type === 'left' ? tabs.splice(0, currentIdx) : tabs.splice(currentIdx + 1, len - currentIdx)
       }
       setTabs(tabs, menuId)
+      gotoCurrentPath()
       judgeTabs()
     }
 
+    // 获取当前路由路径
+    const getCurrentPath = (id) => {
+      const tabs = getTabs()
+      for (let i = 0; i < tabs.length; i++) {
+        if (tabs[i].id === id) {
+          return tabs[i].path
+        }
+      }
+      return undefined
+    }
+
+    // 跳转到当前路由
+    const gotoCurrentPath = () => {
+      const tabs = getTabs()
+      for (let i = 0; i < tabs.length; i++) {
+        if (tabs[i].active) {
+          router.push({path: tabs[i].path})
+          return
+        }
+      }
+    }
+
     // 判断是否可关闭导航栏
     const judgeTabs = () => {
       let disabledCurrent = true

src/components/layout/index.vue

@@ -1,7 +1,8 @@
 <template>
   <layout>
     <template #home>
-      <home></home>
+      <!-- <home></home> -->
+      <router-view />
     </template>
   </layout>
 </template>

src/main.js

@@ -7,6 +7,7 @@ import 'element-plus/lib/theme-chalk/index.css'
 import 'assets/css/layout.scss'
 import 'assets/css/custom.scss'
 import SvgIcon from 'components/SvgIcon.vue'
+import './permission.js'
 
 let app = createApp(App)
 app.use(store)

src/pages/login/Login.vue

@@ -0,0 +1,23 @@
+<!--
+ * Created Date: 2022-02-18 02:59:48
+ * Author: Virgil-N
+ * Description:
+ * -----
+ * Last Modified: 2022-02-18 03:32:19
+ * Modified By: Virgil-N (lieut9011@126.com)
+ * -----
+ * Copyright (c) 2019 - 2022 ⚐
+ * Virgil-N will save your soul!
+ * -----
+-->
+
+<template>
+  <p>login</p>
+</template>
+
+<script>
+export default {
+  name: 'Login'
+}
+</script>
+<style lang="scss" scoped></style>

src/permission.js

@@ -0,0 +1,20 @@
+/**
+ * Created Date: 2022-02-24 02:58:32
+ * Author: Virgil-N
+ * Description:
+ * -----
+ * Last Modified: 2022-02-24 03:04:24
+ * Modified By: Virgil-N (lieut9011@126.com)
+ * -----
+ * Copyright (c) 2019 - 2022 ⚐
+ * Virgil-N will save your soul!
+ * -----
+ */
+
+import router from './router'
+import store from './store'
+
+router.beforeEach(async (to, from, next) => {
+  console.log('router info: ', to, from)
+  next()
+})

src/router/index.js

@@ -9,9 +9,22 @@ const routes = [
       {
         path: 'home',
         name: 'Home',
-        component: () => import('@/views/Home.vue')
+        component: () => import('@/views/Home.vue'),
+        meta: { requiresAuth: true }
+      },
+      {
+        path: 'test',
+        name: 'Test',
+        component: () => import('@/views/test/Test.vue'),
+        meta: { requiresAuth: true }
       }
     ]
+  },
+  {
+    path: '/login',
+    name:'Login',
+    component: () => import('@/pages/login/Login.vue'),
+    meta: { requiresAuth: false }
   }
 ]
 

src/store/index.js

@@ -9,18 +9,18 @@ export default createStore({
     activeMenu: ''
   },
   mutations: {
-    // 获取导航栏类型
-    getNavbarType(state, data) {
+    // 设置导航栏类型
+    setNavbarType(state, data) {
       state.navbarType = data
     },
 
-    // 获取菜单折叠
-    getCollapse(state, data) {
+    // 设置菜单折叠
+    setCollapse(state, data) {
       state.isCollapse = data
     },
 
-    // 获取当前选中菜单
-    getActiveMenu(state, data) {
+    // 设置当前选中菜单
+    setActiveMenu(state, data) {
       state.activeMenu = data
     }
   },

src/views/test/Test.vue

@@ -0,0 +1,24 @@
+<!--
+ * Created Date: 2022-02-18 04:24:37
+ * Author: Virgil-N
+ * Description:
+ * -----
+ * Last Modified: 2022-02-18 04:34:25
+ * Modified By: Virgil-N (lieut9011@126.com)
+ * -----
+ * Copyright (c) 2019 - 2022 ⚐
+ * Virgil-N will save your soul!
+ * -----
+-->
+
+<template>
+  <p>test</p>
+</template>
+
+<script>
+export default {
+  name: 'Test',
+  setup() {}
+}
+</script>
+<style lang="scss" scoped></style>