侧边栏支持外链功能

macrozheng · Jun 9, 2023 · 4eb33d6 · 4eb33d6
1 parent 24e733d
commit 4eb33d6
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 9 deletions.
diff --git a/src/icons/svg/dashboard.svg b/src/icons/svg/dashboard.svg
diff --git a/src/icons/svg/document.svg b/src/icons/svg/document.svg
diff --git a/src/icons/svg/video.svg b/src/icons/svg/video.svg
diff --git a/src/router/index.js b/src/router/index.js
@@ -25,12 +25,24 @@ export const constantRouterMap = [
     path: '',
     component: Layout,
     redirect: '/home',
+    meta: {title: '首页', icon: 'home'},
     children: [{
       path: 'home',
       name: 'home',
       component: () => import('@/views/home/index'),
-      meta: {title: '首页', icon: 'home'}
-    }]
+      meta: {title: '仪表盘', icon: 'dashboard'}
+    },
+    {
+      name: 'document',
+      path: 'https://www.macrozheng.com',
+      meta: {title: '学习教程', icon: 'document'}
+    },
+    {
+      name: 'video',
+      path: 'https://www.macrozheng.com/mall/catalog/mall_video.html',
+      meta: {title: '视频教程', icon: 'video'}
+    },
+    ]
   }
 ]
 

diff --git a/src/views/home/index.vue b/src/views/home/index.vue
@@ -4,25 +4,25 @@
       <el-row :gutter="20">
         <el-col :span="6">
           <div class="out-border">
-            <div class="layout-title">后台项目</div>
+            <div class="layout-title">学习教程</div>
             <div class="color-main address-content">
-              <a href="https://github.com/macrozheng/mall">mall</a>
+              <a href="https://www.macrozheng.com" target="_blank">mall学习教程</a>
             </div>
           </div>
         </el-col>
         <el-col :span="6">
           <div class="out-border">
-            <div class="layout-title">前端项目</div>
+            <div class="layout-title">视频教程</div>
             <div class="color-main address-content">
-              <a href="https://github.com/macrozheng/mall-admin-web">mall-admin-web</a>
+              <a href="https://www.macrozheng.com/mall/catalog/mall_video.html" target="_blank">mall视频教程</a>
             </div>
           </div>
         </el-col>
         <el-col :span="6">
           <div class="out-border">
-            <div class="layout-title">学习教程</div>
+            <div class="layout-title">点Star支持项目</div>
             <div class="color-main address-content">
-              <a href="https://github.com/macrozheng/mall-learning">mall-learning</a>
+              <a href="https://github.com/macrozheng/mall" target="_blank">mall项目</a>
             </div>
           </div>
         </el-col>

diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/views/layout/components/Sidebar/SidebarItem.vue
@@ -18,7 +18,13 @@
 
         <template v-for="child in item.children" v-if="!child.hidden">
           <sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :routes="[child]" :key="child.path"></sidebar-item>
-
+          <!--支持外链功能-->
+          <a v-else-if="child.path.startsWith('http')" v-bind:href="child.path" target="_blank" :key="child.name">
+            <el-menu-item :index="item.path+'/'+child.path">
+              <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
+              <span v-if="child.meta&&child.meta.title" slot="title">{{child.meta.title}}</span>
+            </el-menu-item>
+          </a>
           <router-link v-else :to="item.path+'/'+child.path" :key="child.name">
             <el-menu-item :index="item.path+'/'+child.path">
               <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>