编程式路由

src/router/index.js

@@ -3,23 +3,31 @@ import Router from 'vue-router'
 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,
-    children: [{
-    	path: 'title1',
-    	name: 'title1',
-    	component: Title1
+      path: '/test',
+      name: 'test',
+      component: Test,
+      children: [{
+          path: 'title1',
+          name: 'title1',
+          component: Title1
+        },
+        {
+          path: 'title2',
+          name: 'title2',
+          component: Title2
+        }
+      ]
     },
     {
-    	path: 'title2',
-    	name: 'title2',
-    	component: Title2
-    }]
-  }]
+      path: '/goods',
+      name: 'goods',
+      component: Goods
+    }
+  ]
 })

src/view/goods.vue

@@ -0,0 +1,12 @@
+<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,17 +1,41 @@
 <template>
   <div class="test">
-  	<!-- 动态路由 -->
-  	This is id: {{$route.params.testId}}
+    <!-- 动态路由 -->
+    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>
+    <!-- 嵌套路由 -->
+    <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>
 <style scoped></style>