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传参的时候就不能在地址栏进行拼接操作，需要写出对应的参数名

接受参数跟上面的都一样