js 跳转传值

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "start": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },

src/pages/bar.vue

@@ -1,5 +1,7 @@
 <template>
-    <div>这是bar</div>
+    <div>这是bar
+        <router-link to="/">到首页</router-link>
+    </div>
 </template>
 <style scoped>
 

src/pages/foo.vue

@@ -1,11 +1,20 @@
 <template>
-    <div>这是foo</div>
+    <div>这是foo
+        <router-link to="/bar">到bar</router-link>
+        <button @click="getzhi">获取传值</button>
+    </div>
 </template>
 <style scoped>
 
 </style>
 <script>
 export default {
-    
+    methods:{
+        getzhi(){
+            // 如何获取url传值
+            let zhi = this.$route.query
+            console.log(zhi)
+        }
+    }
 }
 </script>

src/pages/index.vue

@@ -1,3 +1,21 @@
 <template>
-    <div>这是首页</div>
+  <div>
-</template>
+    这是首页
+    <!-- 不能用a标签 -->
+    <!-- <a href="/foo">到foo</a> -->
+    <!-- <router-link to="/foo">到foo</router-link> -->
+    <button @click="tiaozhuan">用js跳转</button>
+    <router-link :to="{path:'/foo',query:{name:123,age:234,asda:1411}}">到foo</router-link>
+  </div>
+</template>
+<script>
+export default {
+    methods:{
+        tiaozhuan(){
+            // js this.$router.push
+
+            this.$router.push({path:'/foo',query:{name:123,age:234,asda:1411}})
+        }
+    }
+}
+</script>