vue 路由传参 params 与 query两种方式的区别
2018-06-08 11:59
731 查看
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>
最后,界面的路由结果展示
阅读更多相关文章推荐
- vue 路由传参 params 与 query两种方式用和的区别
- vue路由传参query和params的区别
- vue-router query和params传参(接收参数)的区别
- vue router使用query和params传参的使用和区别
- vue params、query传参使用(四)
- Vue之嵌套router传参params与query
- vue params、query传参使用详解
- vue动态路由配置及路由传参的方式
- vue-router 源码实现前端路由的两种方式
- 浅析vue-router jquery和params传参(接收参数)$router $route的区别
- 详解vue-router传参的两种方式
- vue 路由传值 query 和 params
- Silve37.Silverlight和ASP.NET相互传参的两种常用方式(QueryString,Cookie)
- hibernate中创建session的两种方式方式,区别在哪里?
- java中创建String类型对象的两种方式以及在使用equals()和“==”两种方法时的区别
- dll的两种调用方式,lib与dll区别
- Android 编程下两种方式注册广播的区别
- vue嵌套路由-query传递参数(三)
- spark读取kafka两种方式的区别
- Java中实现多线程的两种方式之间的区别