diff --git a/src/views/layout/components/Sidebar/Item.vue b/src/views/layout/components/Sidebar/Item.vue
new file mode 100644
index 00000000..b515f615
--- /dev/null
+++ b/src/views/layout/components/Sidebar/Item.vue
@@ -0,0 +1,29 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>
diff --git a/src/views/layout/components/Sidebar/SidebarItem.vue b/src/views/layout/components/Sidebar/SidebarItem.vue
index 30a22baf..ba4c2087 100644
--- a/src/views/layout/components/Sidebar/SidebarItem.vue
+++ b/src/views/layout/components/Sidebar/SidebarItem.vue
@@ -3,15 +3,13 @@
 
     <router-link v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow" :to="resolvePath(onlyOneChild.path)">
       <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-        <svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"/>
-        <span v-if="onlyOneChild.meta&&onlyOneChild.meta.title" slot="title">{{ generateTitle(onlyOneChild.meta.title) }}</span>
+        <item v-if="onlyOneChild.meta" :icon="onlyOneChild.meta.icon" :title="generateTitle(onlyOneChild.meta.title)" />
       </el-menu-item>
     </router-link>
 
     <el-submenu v-else :index="item.name||item.path">
       <template slot="title">
-        <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"/>
-        <span v-if="item.meta&&item.meta.title" slot="title">{{ generateTitle(item.meta.title) }}</span>
+        <item v-if="item.meta" :icon="item.meta.icon" :title="generateTitle(item.meta.title)" />
       </template>
 
       <template v-for="child in item.children" v-if="!child.hidden">
@@ -19,8 +17,7 @@
 
         <router-link v-else :to="resolvePath(child.path)" :key="child.name">
           <el-menu-item :index="resolvePath(child.path)">
-            <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"/>
-            <span v-if="child.meta&&child.meta.title" slot="title">{{ generateTitle(child.meta.title) }}</span>
+            <item v-if="child.meta" :icon="child.meta.icon" :title="generateTitle(child.meta.title)" />
           </el-menu-item>
         </router-link>
       </template>
@@ -32,9 +29,12 @@
 <script>
 import path from 'path'
 import { generateTitle } from '@/utils/i18n'
+import { validateURL } from '@/utils/validate'
+import Item from './Item'
 
 export default {
   name: 'SidebarItem',
+  components: { Item },
   props: {
     // route object
     item: {
@@ -71,11 +71,13 @@ export default {
       }
       return false
     },
-    resolvePath(...paths) {
-      return path.resolve(this.basePath, ...paths)
+    resolvePath(routePath) {
+      return path.resolve(this.basePath, routePath)
+    },
+    isExternalLink(routePath) {
+      return validateURL(routePath)
     },
     generateTitle
   }
 }
 </script>
-