路由

README.md

@@ -1,54 +1,7 @@
-# myproject
+# 手把手教你用vue+node+mongodb搭建一个小商城
 
-> A Vue.js project
-
-## Build Setup
-
-``` bash
-# install dependencies
-npm install
-
-# serve with hot reload at localhost:8080
-npm run dev
-
-# build for production with minification
-npm run build
-
-# build for production and view the bundle analyzer report
-npm run build --report
-```
-
-文本
-------
-# 普通文本
-这里是普通文本
-
-# 单行文本
-	这里是单行文本
-
-# 换行
-直接回车不能换行，  
-这样就可以换行了
-
-# 文本块
-1、
-
-	这里是文本块
-    这里是文本块
-    这里是文本块
-
-2、
-
-```
-这里是文本块
-这里是文本块
-这里是文本块
-```
-
-# 代码高亮
-```javascript
-document.getElementById('test').innerText="hello world";
-```
-
-# 文字高亮
-`html`    `css`    `js`
+一、章节目录
+[1.前期准备工作][https://www.jianshu.com/p/0b91e9a05694]
+2.什么是动态路由
+3.什么是嵌套路由
+4.什么是编程式路由

src/router/index.js

@@ -4,27 +4,31 @@ 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: [
-    {
+  routes: [{
       path: '/test',
       name: 'HelloWorld',
       component: Test,
-      children: [
-      	{
-      		path: 'Title1',
-      		name: 'Title1',
-      		component: Title1
-      	},
-      	{
-      		path: 'Title2',
-      		name: 'Title2',
-      		component: Title2
-      	}
+      children: [{
+          path: 'Title1',
+          name: 'Title1',
+          component: Title1
+        },
+        {
+          path: 'Title2',
+          name: 'Title2',
+          component: Title2
+        }
       ]
+    },
+    {
+      path: '/goods',
+      name: 'goods',
+      component: Goods
     }
   ]
 })

src/view/goods.vue

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

src/view/test.vue

@@ -1,16 +1,41 @@
 <template>
   <div class="test">
-    this is id : {{$route.params.testId}}
-    <br/> this is name : {{$route.params.testName}}
+  	<!-- 动态路由 -->
+    This is id : {{$route.params.testId}}
+    <br/> 
+    This is name : {{$route.params.testName}}
 
+    <!-- 嵌套路由 -->
     <router-link to="/test/title1">标题1</router-link>
     <router-link to="/test/title2">内容2</router-link>
     <router-view></router-view>
+
+    <!-- 编程式路由 -->
+    <div @click="gotoGoods">跳转到商品详情页面</div>
   </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>