vue中如何使用params、query傳參

這篇文章主要介紹vue中如何使用params、query傳參，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

聲明式：<router-link :to="...">

編程式：router.push(...)

這兩種方式 都可以實(shí)現(xiàn)跳轉(zhuǎn)鏈接，在上篇文章繼續(xù)，通過A組件跳轉(zhuǎn)鏈接到B組件并且傳參數(shù)。

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組件添加兩個(gè)參數(shù) name ,age

A組件，綁定一個(gè)@click事件，跳轉(zhuǎn)B組件傳參 使用params

<template>
 <div> <!---只允許有一個(gè)最外層標(biāo)簽 ！-->
  <div>
   <p>{{message}}</p>
   <p @click="toBFun">跳轉(zhuǎn)B組件啊啊</p>
   <!--<router-link :to="{ path: '/B',params:{name:'zs',age:22}}">跳轉(zhuǎn)B組件啊啊</router-link>-->
  </div>
 </div>
</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>

這時(shí)瀏覽器會(huì)顯示 ：http://localhost:8080/#/B/xy/22

在看下query  傳值及地址變化

同樣在 router/index.js路由文件中 不變有兩個(gè)參數(shù)name,age

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

在A組件中，之前參數(shù)傳遞是通過params,

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

替換后，query

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

這時(shí)瀏覽器會(huì)發(fā)現(xiàn)：http://localhost:8080/#/?name=xy&age=22

 通過以上兩種，頁面刷新后，參數(shù)還會(huì)保留的。

獲取值有些不相同：
params：this.$route.params.name;

query:this.$route.query.name;

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

 使用 router-link

 <router-link :to="{ path: '/B',query:{name:'張飛',age:22}}">跳轉(zhuǎn)B組件</router-link>

跳轉(zhuǎn)后，瀏覽器地址為：http://localhost:8080/#/B?name=zzz&age=22

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

 <router-link :to="{path:'/B/123'}">
    跳轉(zhuǎn)B組件</router-link>
  </div>

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

取值

this.$route.params.name

以上是“vue中如何使用params、query傳參”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！