vue params、query傳參使用詳解

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

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

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

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

1、router.push使用

router/index.js

exportdefaultnewRouter({

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

template

div!---只允許有一個最外層標簽！--

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

exportdefault{

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路由文件中不變有兩個參數(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=xyage=22

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

獲取值有些不相同：

params：this.$;

query:this.$;

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

使用router-link

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

跳轉(zhuǎn)后，瀏覽器地址為：http://localhost:8080/#/Bname=zzzage=22

跟this.$rou