Vue Router的params和query传参的使用和区别

vue

vue页面跳转有两种方式分别是:name和path

this.$router.push({name: 'HelloWorld2})

this.$router.push({path: '/hello-world1'})

传参也有两种方式分别是:params和query

this.$router.push({name: 'HelloWorld2', params:{id:1}})

this.$router.push({path: '/hello-world2', query:{id:2}})

下面放张图来展示路径和参数之间的关系

结论: 

使用name跳转可以用params和query传参

当name和query对应的时候也可以跳转并传参,但是路由后面不能加参数名,否则页面会变空白

使用path跳转只能用query传参

如果使用path对应params则数据传输不过去

使用query传参地址栏用?拼接起来的,类似于Ajax中的get请求

{

path: '/hello-world',

name: 'HelloWorld2',

component: HelloWorld2

}

 这是使用query传参的地址栏显示:hello-world?id=2

使用params传参的时候要在路由后面加参数名,(如果不加参数名也可以传递参数,但是页面一刷新参数就丢失了),并且传参的时候,参数名要跟路由后面设置的参数名对应。使用query方法,就没有这种限制,直接在跳转里面用就可以

{

path: '/hello-world/:id',

name: 'HelloWorld2',

component: HelloWorld2

}

这是使用params传参的地址栏显示:hello-world/2 

讲了传参怎么接受参数呢? 

params和query接受参数很类似

this.$route.params.id,
this.$route.query.id,

 这里注意使用的是route不是router!

再来补充下使用

<router-link>对应path和name怎么传参
先来看index.js的写法

{

path: '/my-order/:state',

name: 'my-order',

component: MyOrder,

}

path传参:

<router-link:to="{path: '/select-address/0'}"></router-link>
看见了吧,直接在跳转的时候在地址栏拼接上对应的参数即可,

name传参:

<router-link :to="{name: 'my-order', params: {state: 0}"></router-link>
使用name传参的时候就不能在地址栏进行拼接操作,需要写出对应的参数名

接受参数跟上面的都一样

以上是 Vue Router的params和query传参的使用和区别 的全部内容, 来源链接: utcz.com/z/380502.html

回到顶部