perf(SideNav): Optimize the sidenav and route config file

examples/App.vue

@@ -17,7 +17,7 @@ export default {
   },
   computed: {
     isIndex () {
-      return this.$route.name === 'index'
+      return this.$route.path === '/'
     }
   }
 }

examples/components/side-nav.vue

@@ -1,77 +1,77 @@
 <style lang="less" type="text/less">
-  .side-nav{
-    display: inline-block;
-    margin: 32px 0;
-    padding: 0;
-    color: #3F536E;
-    background-color: #fff;
-    z-index: 99;
-    .group-container{
-      margin-bottom: 32px;
+.side-nav {
+  display: inline-block;
+  margin: 32px 0;
+  padding: 0;
+  color: #3f536e;
+  background-color: #fff;
+  z-index: 99;
+  .group-container {
+    margin-bottom: 32px;
+  }
+  .side-nav-title {
+    padding: 0 24px 8px;
+    color: #8dabc4;
+    font-size: 12px;
+    font-weight: bold;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+  }
+  .side-nav-items {
+    font-size: 14px;
+    font-weight: normal;
+    line-height: 1.8;
+    a {
+      display: block;
+      position: relative;
+      padding: 8px 24px;
+      color: #3f536e;
+      font-weight: normal;
+      line-height: 1.5;
+      cursor: pointer;
     }
-    .side-nav-title{
-      padding: 0 24px 8px;
-      color: #8DABC4;
-      font-size: 12px;
+    .side-nav-group {
+      display: block;
+      position: relative;
+      padding: 6px 0 6px 24px;
+      color: #2c405a;
       font-weight: bold;
-      letter-spacing: 1px;
-      text-transform: uppercase;
     }
-    .side-nav-items{
+    .slid-nav-component {
+      display: block;
+      position: relative;
+      padding: 6px 24px 6px 32px;
+      color: #616367;
       font-size: 14px;
-      font-weight: normal;
-      line-height: 1.8;
-      a{
-        display: block;
-        position: relative;
-        padding: 8px 24px;
-        color: #3F536E;
-        font-weight: normal;
-        line-height: 1.5;
-        cursor: pointer;
-      }
-      .side-nav-group{
-        display: block;
-        position: relative;
-        padding: 6px 0 6px 24px;
-        color: #2C405A;
-        font-weight: bold;
-      }
-      .slid-nav-component{
-        display: block;
-        position: relative;
-        padding: 6px 24px 6px 32px;
-        color: #616367;
-        font-size: 14px;
-      }
-      .active{
-        color: #3FAAF5;
-      }
+    }
+    .active {
+      color: #3faaf5;
     }
   }
+}
 </style>
 <template>
   <div class="side-nav">
     <div v-for="title in (Object.keys(data))" class="group-container">
       <p class="side-nav-title">{{title}}</p>
       <div class="side-nav-items" v-for="nav in data[title]" v-if="nav.desc">
-        <router-link :class="$route.name===nav.name ? 'active' : ''" v-if="nav.name" :to="{name: nav.name}">{{nav.desc}}</router-link>
+        <router-link :class="$route.name === nav.name ? 'active' : ''" v-if="nav.name" :to="{name: nav.name}">{{nav.desc}}</router-link>
         <p v-else class="side-nav-group">{{nav.desc}}</p>
         <div v-for="item in nav.items">
-          <router-link :to="{name: item.name}" :class="$route.name===item.name ? 'active' : ''" class="slid-nav-component">{{item.desc}}</router-link>
+          <router-link :to="{name: item.name}" :class="$route.name === item.name ? 'active' : ''" class="slid-nav-component">{{item.desc}}</router-link>
         </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-  import navConf from '../nav.config.json'
-  export default {
-    data () {
-      return {
-        data: navConf
-      }
+import navConf from '../nav.config.json'
+export default {
+  data () {
+    return {
+      data: navConf
     }
   }
+}
 </script>

examples/nav.config.json

@@ -1,10 +1,5 @@
 {
   "开发指南": [
-    {
-      "name": "index",
-      "path": "/",
-      "type": "pages"
-    },
     {
       "name": "guide",
       "path": "/guide",

examples/router/index.js

@@ -4,7 +4,10 @@ import navConf from '../nav.config.json'
 
 Vue.use(Router)
 
-let routes = []
+let routes = [{
+  path: '/',
+  component: () => import('../pages/index.vue')
+}]
 
 Object.keys(navConf).forEach((item) => {
   routes = routes.concat(navConf[item])
@@ -15,19 +18,18 @@ let addRoutes = (router) => {
     if (route.items) {
       addRoutes(route.items)
       routes = routes.concat(route.items)
-    } else {
-      if (route.type === 'pages') {
-        route.component = r => require.ensure([], () =>
-          r(require(`../pages/${route.name}.vue`)))
-        return
-      }
-      route.component = r => require.ensure([], () =>
-        r(require(`../docs/${route.name}.md`)))
+    } else if (route.name) {
+      route.component = () => import(`../docs/${route.name}.md`)
     }
   })
 }
 addRoutes(routes)
 
+routes.push({
+  path: '*',
+  redirect: '/'
+})
+
 export default new Router({
   routes: routes
 })