feat: add mixed navigation mode; ⭐ #102

新增：混合导航菜单模式；

src/components/menu/menu.js

@@ -77,7 +77,7 @@ export default {
   },
   created () {
     this.updateMenu()
-    if (!this.options[0].fullPath) {
+    if (this.options.length > 0 && !this.options[0].fullPath) {
       this.formatOptions(this.options, '')
     }
     // 自定义国际化配置
@@ -90,7 +90,7 @@ export default {
   },
   watch: {
     options(val) {
-      if (!val[0].fullPath) {
+      if (val.length > 0 && !val[0].fullPath) {
         this.formatOptions(this.options, '')
       }
     },
@@ -195,18 +195,14 @@ export default {
     },
     updateMenu () {
       const menuRoutes = this.$route.matched.filter(item => item.path !== '')
-      const route = menuRoutes.pop()
-      this.selectedKeys = [this.getSelectedKey(route)]
+      this.selectedKeys = this.getSelectedKey(this.$route)
       let openKeys = menuRoutes.map(item => item.path)
       if (!fastEqual(openKeys, this.sOpenKeys)) {
         this.collapsed || this.mode === 'horizontal' ? this.cachedOpenKeys = openKeys : this.sOpenKeys = openKeys
       }
     },
     getSelectedKey (route) {
-      if (route.meta.invisible && route.parent) {
-        return this.getSelectedKey(route.parent)
-      }
-      return route.path
+      return route.matched.map(item => item.path)
     }
   },
   render (h) {

src/components/setting/Setting.vue

@@ -26,6 +26,7 @@
       >
         <img-checkbox :title="$t('navigate.side')" img="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" value="side"/>
         <img-checkbox :title="$t('navigate.head')" img="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" value="head"/>
+        <img-checkbox :title="$t('navigate.mix')" img="https://gw.alipayobjects.com/zos/antfincdn/x8Ob%26B8cy8/LCkqqYNmvBEbokSDscrm.svg" value="mix"/>
       </img-checkbox-group>
     </setting-item>
     <setting-item>

src/components/setting/i18n.js

@@ -12,6 +12,7 @@ module.exports = {
         title: '导航设置',
         side: '侧边导航',
         head: '顶部导航',
+        mix: '混合导航',
         content: {
           title: '内容区域宽度',
           fluid: '流式',
@@ -82,6 +83,7 @@ module.exports = {
         title: 'Navigation Mode',
         side: 'Side Menu Layout',
         head: 'Top Menu Layout',
+        mix: 'Mix Menu Layout',
         content: {
           title: 'Content Width',
           fluid: 'Fluid',