侧边栏支持外链功能

src/icons/svg/document.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1686299251924" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10052" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M629.76 849.92v151.04l220.16-184.32H665.6c-17.92 0-35.84 15.36-35.84 33.28z m184.32-742.4H125.44c-17.92 0-33.28 20.48-33.28 38.4v824.32c0 17.92 12.8 30.72 30.72 30.72h473.6v-184.32c0-17.92 17.92-35.84 33.28-35.84h220.16v-640c0-15.36-17.92-35.84-35.84-33.28z m-563.2 624.64c-23.04 0-40.96-17.92-40.96-40.96 0-23.04 17.92-40.96 40.96-40.96s40.96 17.92 40.96 40.96c0 20.48-17.92 40.96-40.96 40.96z m0-186.88c-23.04 0-40.96-17.92-40.96-40.96 0-23.04 17.92-40.96 40.96-40.96s40.96 17.92 40.96 40.96c0 23.04-17.92 40.96-40.96 40.96z m0-184.32c-23.04 0-40.96-17.92-40.96-40.96 0-23.04 17.92-40.96 40.96-40.96s40.96 17.92 40.96 40.96c0 20.48-17.92 40.96-40.96 40.96z m445.44 335.36c0 10.24-7.68 17.92-17.92 17.92H376.32c-10.24 0-17.92-7.68-17.92-17.92v-17.92c0-10.24 7.68-17.92 17.92-17.92h302.08c10.24 0 17.92 7.68 17.92 17.92v17.92z m0-184.32c0 10.24-7.68 17.92-17.92 17.92H376.32c-10.24 0-17.92-7.68-17.92-17.92v-17.92c0-10.24 7.68-17.92 17.92-17.92h302.08c10.24 0 17.92 7.68 17.92 17.92v17.92z m0-184.32c0 10.24-7.68 17.92-17.92 17.92H376.32c-10.24 0-17.92-7.68-17.92-17.92v-17.92c0-10.24 7.68-17.92 17.92-17.92h302.08c10.24 0 17.92 7.68 17.92 17.92v17.92zM903.68 23.04H202.24c-25.6 0-43.52 25.6-43.52 51.2h691.2c17.92 0 33.28 17.92 33.28 33.28v624.64c25.6 0 51.2-15.36 51.2-40.96V53.76c-2.56-17.92-15.36-30.72-30.72-30.72z" fill="" p-id="10053"></path></svg>

src/icons/svg/video.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1686299438645" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19366" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M814.545455 186.181818h-230.4l121.018181-86.109091c11.636364-6.981818 13.963636-20.945455 4.654546-32.581818-6.981818-11.636364-20.945455-13.963636-32.581818-4.654545l-165.236364 116.363636-165.236364-116.363636c-11.636364-6.981818-25.6-4.654545-32.581818 4.654545-6.981818 11.636364-4.654545 25.6 4.654546 32.581818L439.854545 186.181818H209.454545c-76.8 0-139.636364 62.836364-139.636363 139.636364v477.090909c0 76.8 62.836364 139.636364 139.636363 139.636364h605.09091c76.8 0 139.636364-62.836364 139.636363-139.636364V325.818182c0-76.8-62.836364-139.636364-139.636363-139.636364z m93.090909 616.727273c0 51.2-41.890909 93.090909-93.090909 93.090909H209.454545c-51.2 0-93.090909-41.890909-93.090909-93.090909V325.818182c0-51.2 41.890909-93.090909 93.090909-93.090909h605.09091c51.2 0 93.090909 41.890909 93.090909 93.090909v477.090909z" fill="" p-id="19367"></path><path d="M686.545455 523.636364l-251.345455-144.290909c-6.981818-4.654545-16.290909-6.981818-23.272727-6.981819-23.272727 0-46.545455 18.618182-46.545455 46.545455v290.909091c0 27.927273 23.272727 46.545455 46.545455 46.545454 6.981818 0 16.290909-2.327273 23.272727-6.981818L686.545455 605.090909c30.254545-18.618182 30.254545-62.836364 0-81.454545z m-274.618182 186.181818V418.909091l251.345454 144.290909-251.345454 146.618182z" fill="" p-id="19368"></path></svg>

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'}
+    },
+    ]
   }
 ]
 

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>

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>