set router

src/App.vue

 <template>
   <div id="app">
-    <img src="./assets/logo.png">
+    <router-view name="topbar"/>
+    <router-view name="sidebar"/>
     <router-view/>
   </div>
 </template>
@@ -20,4 +21,8 @@ export default {
   color: #2c3e50;
   margin-top: 60px;
 }
+*{
+  margin: 0;
+  padding: 0;
+}
 </style>

src/components/HelloWorld.vue

 <template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li>
-        <a
-          href="https://vuejs.org"
-          target="_blank"
-        >
-          Core Docs
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://forum.vuejs.org"
-          target="_blank"
-        >
-          Forum
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://chat.vuejs.org"
-          target="_blank"
-        >
-          Community Chat
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://twitter.com/vuejs"
-          target="_blank"
-        >
-          Twitter
-        </a>
-      </li>
-      <br>
-      <li>
-        <a
-          href="http://vuejs-templates.github.io/webpack/"
-          target="_blank"
-        >
-          Docs for This Template
-        </a>
-      </li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li>
-        <a
-          href="http://router.vuejs.org/"
-          target="_blank"
-        >
-          vue-router
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vuex.vuejs.org/"
-          target="_blank"
-        >
-          vuex
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vue-loader.vuejs.org/"
-          target="_blank"
-        >
-          vue-loader
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-        >
-          awesome-vue
-        </a>
-      </li>
-    </ul>
+  <div class="main-container">
+    main
   </div>
 </template>
 
@@ -88,26 +9,18 @@ export default {
   name: 'HelloWorld',
   data () {
     return {
-      msg: 'Welcome to Your Vue.js App'
+     
     }
   }
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
+
 <style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
+  .main-container{
+    position:fixed;
+    top:100px;
+    left:10%;
+    backgroud-color:rgba(0,0,0,0.6);
+  }
 </style>

src/components/Member.vue

+<template>
+  <div class="setting-container">
+  	setting
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Topbar',
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
+  }
+}
+</script>
+
+<style scoped>
+	.setting-container{
+		 position:fixed;
+	    top:100px;
+	    left:10%;
+	    backgroud-color:rgba(0,0,0,0.6);
+	}
+
+</style>
\ No newline at end of file

src/components/Setting.vue

+
+<template>
+  <div class="setting-container">
+  	setting
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Topbar',
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
+  }
+}
+</script>
+
+<style scoped>
+	.setting-container{
+		 position:fixed;
+	    top:100px;
+	    left:10%;
+	    backgroud-color:rgba(0,0,0,0.6);
+	}
+
+</style>
\ No newline at end of file

src/components/Topbar.vue

+
+<template>
+  <div class="top-container">
+  	top
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Topbar',
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
+  }
+}
+</script>
+
+<style scoped>
+	.top-container{
+		position: fixed;
+		top: 0;
+		width: 100%;
+		height: 100px;
+		background-color: rgba(0,0,0,0.5);
+	}
+
+</style>
\ No newline at end of file

src/components/Tradings.vue

+<template>
+  <div class="setting-container">
+  	setting
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Topbar',
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
+  }
+}
+</script>
+
+<style scoped>
+	.setting-container{
+		 position:fixed;
+	    top:100px;
+	    left:10%;
+	    backgroud-color:rgba(0,0,0,0.6);
+	}
+
+</style>
\ No newline at end of file

src/components/sidebar.vue

+
+<template>
+  <div class="side-container">
+  	<ul>
+  		<router-link to="/"></router-link>	
+  		<router-link to="/tradings">订单</router-link>	
+  		<router-link to="/member">会员</router-link>		
+  		<router-link to="/setting">设置</router-link>		
+  	</ul>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
+  }
+}
+</script>
+
+<style scoped>
+	.side-container{
+		position: fixed;
+		left: 0;
+		top: 100px;
+		height: 100%;
+		width: 10%;
+		background-color: rgba(0,0,0,0.5)
+	}
+
+</style>
\ No newline at end of file

src/router/index.js

 import Vue from 'vue'
 import Router from 'vue-router'
 import HelloWorld from '@/components/HelloWorld'
-
+import Sidebar from '@/components/Sidebar'
+import Topbar from '@/components/Topbar'
+import Tradings from '@/components/Tradings'
+import Member from '@/components/Member'
+import Setting from '@/components/Setting'
 Vue.use(Router)
 
 export default new Router({
   routes: [
     {
       path: '/',
-      name: 'HelloWorld',
-      component: HelloWorld
+      components: {
+      	default:HelloWorld,
+      	sidebar:Sidebar,
+      	topbar:Topbar
+      }
+    },
+    {
+      path: '/tradings',
+      component:Tradings
+    },
+    {
+      path: '/member',
+      component:Member
+    },
+    {
+      path: '/setting',
+      component:Setting
     }
   ]
 })