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

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),陽西企業(yè)網(wǎng)站建設(shè),陽西品牌網(wǎng)站建設(shè),網(wǎng)站定制,陽西網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,陽西網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

聲明式：

編程式：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組件添加兩個參數(shù) name ,age

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

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

在看下query  傳值及地址變化

同樣在 router/index.js路由文件中 不變有兩個參數(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}});

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

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

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

query:this.$route.query.name;

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

 使用 router-link

 跳轉(zhuǎn)B組件

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

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

 
    跳轉(zhuǎn)B組件
  

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

this.$route.params.name