diff --git a/app/web/component/app/demo.vue b/app/web/component/app/demo.vue
new file mode 100644
index 0000000..e947d5f
--- /dev/null
+++ b/app/web/component/app/demo.vue
@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <h1>
+            Hello World!!!!
+        </h1>
+    </div>
+</template>
+
+<script type="text/babel">
+    export default {
+        computed: {
+
+        }
+    }
+</script>
+
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/app/web/component/app/list.vue b/app/web/component/app/list.vue
index d83cc78..636d462 100644
--- a/app/web/component/app/list.vue
+++ b/app/web/component/app/list.vue
@@ -1,63 +1,70 @@
 <template>
-  <div style="font-size: 24px; text-align: center">
-    <div class="container smart-container">
-      <div class="row row-offcanvas row-offcanvas-right">
-        <div class="col-xs-12 col-sm-9">
-          <ul class="smart-artiles" id="articleList">
-            <li v-for="item in articleList">
-              <div class="point">+{{item.hits}}</div>
-              <div class="card">
-                <h2><router-link :to="'/detail/'+item.id" class="nav-item-a">{{item.title}}</router-link></h2>
-                <div>
-                  <ul class="actions">
-                    <li>
-                      <time class="timeago">{{item.moduleName}}</time>
-                    </li>
-                    <li class="tauthor">
-                      <a href="#" target="_blank" class="get">Sky</a>
-                    </li>
-                    <li><a :href="item.url" target="_blank">原文</a></li>
-                    <li>
-                      <span class="timeago">{{item.summary}}</span>
-                    </li>
-                    <li>
-                      <span class="timeago"></span>
-                    </li>
-                  </ul>
+    <div style="font-size: 24px; text-align: center">
+        <div class="container smart-container">
+            <div class="row row-offcanvas row-offcanvas-right">
+                <div class="col-xs-12 col-sm-9">
+                    <ul class="smart-artiles" id="articleList">
+                        <div>
+                            <h3>DEMO</h3>
+                            <router-view name="demo"></router-view>
+                        </div>
+                        <li v-for="item in articleList">
+                            <div class="point">+{{item.hits}}</div>
+                            <div class="card">
+                                <h2>
+                                    <router-link :to="'/detail/'+item.id" class="nav-item-a">{{item.title}}
+                                    </router-link>
+                                </h2>
+                                <div>
+                                    <ul class="actions">
+                                        <li>
+                                            <time class="timeago">{{item.moduleName}}</time>
+                                        </li>
+                                        <li class="tauthor">
+                                            <a href="#" target="_blank" class="get">Sky</a>
+                                        </li>
+                                        <li><a :href="item.url" target="_blank">原文</a></li>
+                                        <li>
+                                            <span class="timeago">{{item.summary}}</span>
+                                        </li>
+                                        <li>
+                                            <span class="timeago"></span>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <div id="pagerBottom" class="smart-pager" v-if="isLoading">
+                        <img src="../../asset/images/loading.gif">
+                    </div>
                 </div>
-              </div>
-            </li>
-          </ul>
-          <div id="pagerBottom" class="smart-pager" v-if="isLoading">
-            <img src="../../asset/images/loading.gif">
-          </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 </template>
 <style>
 
 </style>
 <script type="text/babel">
-  export default{
-    computed: {
-      isLoading(){
-       return false;
-      },
-      articleList() {
-        return this.$store.state.articleList;
-      }
-    },
-    preFetch ({ state, dispatch, commit }) {
-      return Promise.all([
-        dispatch('FETCH_ARTICLE_LIST')
-      ])
-    },
-    beforeMount() {
-      return Promise.all([
-        this.$store.dispatch('FETCH_ARTICLE_LIST')
-      ]);
+    export default {
+        computed: {
+            isLoading() {
+                return false;
+            },
+            articleList() {
+                return this.$store.state.articleList;
+            }
+        },
+        preFetch({state, dispatch, commit}) {
+            return Promise.all([
+                dispatch('FETCH_ARTICLE_LIST')
+            ])
+        },
+        beforeMount() {
+            return Promise.all([
+                this.$store.dispatch('FETCH_ARTICLE_LIST')
+            ]);
+        }
     }
-  }
 </script>
diff --git a/app/web/component/app/router.js b/app/web/component/app/router.js
index 47f9542..4929104 100755
--- a/app/web/component/app/router.js
+++ b/app/web/component/app/router.js
@@ -4,26 +4,32 @@ import VueRouter from 'vue-router';
 
 import ListView from './list';
 import DetailView from './detail';
+// demo
+// import demoTest from './demo.vue';
 
 Vue.use(VueRouter);
 
 const router = new VueRouter({
-  mode: 'history',
-  base: '/app',
-  routes: [
-    {
-      path: '/',
-      component: ListView
-    },
-    {
-      path: '/list',
-      component: ListView
-    },
-    {
-      path: '/detail/:id',
-      component: DetailView
-    }
-  ]
+    mode: 'history',
+    base: '/app',
+    routes: [
+        {
+            path: '/',
+            components: {
+                default: ListView,
+                demo: () => import('./demo.vue')
+                // demo: demoTest
+            }
+        },
+        {
+            path: '/list',
+            component: ListView
+        },
+        {
+            path: '/detail/:id',
+            component: DetailView
+        }
+    ]
 });
 
 export default router;