fix: by monitoring the route, display the corresponding directory content in the left menu (#2278)

* fix: by monitoring the route, display the corresponding directory content in the left menu

* fix: modify review code

Author: James-9696

examples/sites/src/views/layout/layout.vue

@@ -56,7 +56,7 @@
 
 <script>
 import { useRoute } from 'vue-router'
-import { defineComponent, reactive, computed, toRefs, onMounted, onUnmounted } from 'vue'
+import { defineComponent, reactive, computed, toRefs, watch, onMounted, onUnmounted } from 'vue'
 import { TreeMenu, Dropdown, DropdownMenu, Tooltip, Tag, Radio, RadioGroup, Button } from '@opentiny/vue'
 import { genMenus, getMenuIcons } from '@/menus.jsx'
 import { router } from '@/router.js'
@@ -96,6 +96,7 @@ export default defineComponent({
     })
 
     const lang = getWord('zh-CN', 'en-US')
+    const route = useRoute()
     const { all: allPathParam, theme = defaultTheme } = useRoute().params
     const allPath = allPathParam ? allPathParam + '/' : ''
     const getTo = (route, key) => `${import.meta.env.VITE_CONTEXT}${allPath}${lang}/${theme}/${route}${key}`
@@ -128,6 +129,19 @@ export default defineComponent({
     }
     let routerCbDestroy = null
 
+    watch(
+      () => route.path,
+      (currentVal) => {
+        // 监听路由变化，反作用与左侧列表菜单展开对应的列表
+        const list = currentVal.split('/')
+        if (list && list[list.length - 1]) {
+          const key = list[list.length - 1]
+          state.expandKeys = [key]
+          state.treeMenuRef.setCurrentKey(key)
+        }
+      }
+    )
+
     onMounted(async () => {
       // 每次切换路由，有锚点则跳转到锚点，否则导航到顶部
       routerCbDestroy = router.afterEach((to) => {