Merge branch 'chapter6'

src/components/HelloWorld.vue

@@ -4,43 +4,28 @@
     <h2>Essential Links</h2>
     <ul>
       <li>
-        <a
-          href="https://vuejs.org"
-          target="_blank"
-        >
+        <a href="https://vuejs.org" target="_blank">
           Core Docs
         </a>
       </li>
       <li>
-        <a
-          href="https://forum.vuejs.org"
-          target="_blank"
-        >
+        <a href="https://forum.vuejs.org" target="_blank">
           Forum
         </a>
       </li>
       <li>
-        <a
-          href="https://chat.vuejs.org"
-          target="_blank"
-        >
+        <a href="https://chat.vuejs.org" target="_blank">
           Community Chat
         </a>
       </li>
       <li>
-        <a
-          href="https://twitter.com/vuejs"
-          target="_blank"
-        >
+        <a href="https://twitter.com/vuejs" target="_blank">
           Twitter
         </a>
       </li>
       <br>
       <li>
-        <a
-          href="http://vuejs-templates.github.io/webpack/"
-          target="_blank"
-        >
+        <a href="http://vuejs-templates.github.io/webpack/" target="_blank">
           Docs for This Template
         </a>
       </li>
@@ -48,34 +33,22 @@
     <h2>Ecosystem</h2>
     <ul>
       <li>
-        <a
-          href="http://router.vuejs.org/"
-          target="_blank"
-        >
+        <a href="http://router.vuejs.org/" target="_blank">
           vue-router
         </a>
       </li>
       <li>
-        <a
-          href="http://vuex.vuejs.org/"
-          target="_blank"
-        >
+        <a href="http://vuex.vuejs.org/" target="_blank">
           vuex
         </a>
       </li>
       <li>
-        <a
-          href="http://vue-loader.vuejs.org/"
-          target="_blank"
-        >
+        <a href="http://vue-loader.vuejs.org/" target="_blank">
           vue-loader
         </a>
       </li>
       <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-        >
+        <a href="https://github.com/vuejs/awesome-vue" target="_blank">
           awesome-vue
         </a>
       </li>
@@ -85,28 +58,32 @@
 
 <script>
   export default {
-  name: 'HelloWorld',
+    name: "HelloWorld",
     data() {
       return {
-      msg: 'Welcome to Your Vue.js App'
-    }
-  }
+        msg: "Welcome to Your Vue.js App"
+      };
     }
+  };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-h1, h2 {
+  h1,
+  h2 {
     font-weight: normal;
   }
+
   ul {
     list-style-type: none;
     padding: 0;
   }
+
   li {
     display: inline-block;
     margin: 0 10px;
   }
+
   a {
     color: #42b983;
   }

src/router/index.js

@@ -1,14 +1,20 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import HelloWorld from '@/components/HelloWorld'
+import Test from '@/view/test'
+import Title1 from '@/view/title1'
+import Title2 from '@/view/title2'
 import Goods from '@/view/goods'
 
 Vue.use(Router)
 
 export default new Router({
   routes: [{
-    path: '/test',
-    name: 'test',
-    component: Test,
+    path: '/',
+    name: '/',
+    components: {
+      default: Goods,
+      title1: Title1,
+      title2: Title2
+    }
   }]
 })

src/view/goods.vue

@@ -1,13 +1,10 @@
 <template>
 	<div class="goods">
-		This is goods
+		This is goods:
 		<span>{{$route.query.goodsId}}</span>
 	</div>
 </template>
 <script>
-export default {
-
-}
-
+export default {};
 </script>
 <style scoped></style>

src/view/test.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="test">
+    <!-- 动态路由 -->
+    This is id: {{$route.params.testId}}
+
+    <!-- 嵌套路由 -->
+    <router-link to="/test/title1">标题1</router-link>
+    <router-link to="/test/title2">标题2</router-link>
+    <router-view></router-view>
+
+    <!-- 编程式路由 -->
+    <div @click="gotoGoods">跳转到商品详情页面</div>
+
+     <!-- 命名路由 -->
+    <router-link v-bind:to="{name: 'goods'}">用命名路由的方式跳转到商品详情页面</router-link>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      msg: 'hello vue'
+    }
+  },
+  methods: {
+    gotoGoods() {
+      //this.$router.push('/goods');
+
+      // this.$router.push({
+      // 	path: '/goods?goodsId=666'
+      // });
+      
+      this.$router.push({
+      	path: '/goods',
+      	query: {
+      		goodsId: 666
+      	}
+      })
+    }
+  }
+}
+
+</script>
+<style scoped></style>

src/view/title1.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="title1">
+  	这里是title1的内容
+  </div>
+</template>
+<script>
+export default {
+}
+
+</script>
+<style scoped></style>

src/view/title2.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="title2">
+  	这里是title2的内容
+  </div>
+</template>
+<script>
+export default {
+}
+
+</script>
+<style scoped></style>