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

10余年的南木林網(wǎng)站建設經(jīng)驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。營銷型網(wǎng)站建設的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調(diào)整南木林建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)公司從事“南木林網(wǎng)站設計”,“南木林網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

聲明式：

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

這兩種方式 都可以實現(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組件