编程式路由

src/router/index.js

@@ -3,6 +3,7 @@ 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)
 
@@ -20,6 +21,13 @@ export default new Router({
           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

@@ -7,11 +7,35 @@
     <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>