vue+query傳參步奏詳解

這次帶給大家vue query傳參步奏詳解，vue query傳參的注意事項有哪些，下面就是實戰案例，一起來看一下。

最近在學習Vue，本文介紹了vue params、query傳參使用，分享給大家，也給自己留個筆記

宣告式：

編者：router.push(...)

這兩種方式 都可以實現跳轉鏈接，在上篇文章繼續，透過A組件跳轉鏈接到B組件並且傳參數。

1、router.push使用

# router/index.js

export default new Router({
 routes: [
   {
   path: '/',
   name: 'A',
   component: require('../components/A')
  },
  {
   path: '/B/:name/:age',
   name: 'B',
   component: require('../components/B')
  }
 ]
})

# 上邊，在路由

中為B元件新增兩個參數 name ,age

A元件，綁定一個@click事件

，跳轉B元件傳參 使用params

<template>
 <p> <!---只允许有一个最外层标签 ！-->
  <p>
   <p>{{message}}</p>
   <p @click="toBFun">跳转B组件啊啊</p>
   <!--<router-link :to="{ path: &#39;/B&#39;,params:{name:&#39;zs&#39;,age:22}}">跳转B组件啊啊</router-link>-->
  </p>
 </p>
</template>
<script>
 export default {
  data: function () {
   return {
    message: 'vue好帅啊！'
   }
  },
  methods: {
   toBFun: function(){
    this.$router.push({name:'B',params:{name:'xy',age:22}});
   }
  }
 }
</script>
<style>
</style>

這時瀏覽器會顯示 ：http://localhost:8080/#/B/xy/22

# 在看下query  傳值

及位址變化

# 同樣在 router/index.js路由檔案中 不變有兩個參數name,age

 {
   path: '/B/:name/:age',
   name: 'B',
   component: require('../components/B')
  }

在A元件中，先前參數傳遞是透過params,

this.$router.push({name:'B',params:{name:'xy',age:22}});

替換後，query

 this.$router.push({name:'B',query:{name:'xy',age:22}});

這時瀏覽器會發現：http://localhost:8080/#/?name=xy&age=22

 經過以上兩種，頁面刷新後，參數還會保留的。

取得值有些不相同：

params：this.$route.params.name;

query:this.$route.query.name;

------------------------ 還有種方式---------------------- ----------------------

 使用 router-link

 <router-link :to="{ path: &#39;/B&#39;,query:{name:&#39;张飞&#39;,age:22}}">跳转B组件</router-link>

跳轉後，瀏覽器位址為：http://localhost:8080/#/B?name=zzz&age=22

# 跟  this.$router.push(...) 是一樣的

 <router-link :to="{path:&#39;/B/123&#39;}">
    跳转B组件</router-link>
  </p>

{
   path: '/B/:name',
   name: 'B',
   component: require('../components/B')
  }

取值

this.$route.params.name

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

####

以上是vue+query傳參步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！