vue 路由传参 params 与 query两种方式的区别

1. query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。

2. query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

具体使用

第一步，路由配置

{

path: '/test/:id', // params传参写法

name: 'test',

component: test

},

{

path: '/list', // query传参写法

name: 'list',

component: list

}

第二步，编程式路由导航

<div @click="toList">params传值</div>

<br>

<div @click="toList2">querry传值</div>

    methods函数写法

toTest () {

this.$router.push({name: 'test', params: {id: 111}})

},

toList () {

this.$router.push({path: '/list', query: {id: 233}})

}

第三步，跳转后的页面读取动态传的参数

<div>test页面params传值：{{$route.params.id}}</div>

<div>list页面query传值：{{this.$route.query.id}}</div>

最后，界面的路由结果展示

http://localhost:8080/#/test/111

http://localhost:8080/#/list?id=233