四. query 和 params 传参的区别(编程式/路由式导航)
1. 知识点(1)使用query传参的话,会在浏览器的url栏看到传的参数类似于get请求,使用params传参的话则不会,类似于post请求。(2)无论路由跳转方式是声明式导航,还是编程式导航,都有这两种传参方式。(这里以声明式导航为例,并且只说明对象形式的传参方式)2. query传参(1)声明式导航情况下<router-link :to="{path=’/helloquery:{id:
1. 知识点
(1)使用query传参,类似于get请求,使用params传参,类似于post请求。
(2)无论路由跳转方式是声明式导航,还是编程式导航,都有这两种传参方式。
(3)当然这两种传参方式可以同时使用,尚品汇第8集举了这个例子,在尚品汇31集合并参数时,同时使用了两种传参方式,原本以为=两种传参方式都用的情况没什么意义。
(4)params传参,push里面只能是 name:‘xxxx’,不能是path:‘/xxx’,因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined。
重要总结:query的语法用于path编写的传参地址,也可用于name编写的传参地址,params的语法必须用于name编写的传参地址
(5)下面忘了说两种传参方式的接收传参的区别
这和是声明式导航还是编程式导航无关!
1)query:this.$route.query.key
(key是参数名)
2)params:this.$route.params.key
(这里只说明对象形式的传参方式)
2. query传参
(1)声明式导航情况下
<!--
path:路由组件的path
-->
<router-link :to="{
path='/hello'
query:{
id:666
name:'小明'
}
}">
标签体内容
</router-link>
注意:可附加name属性
(2)编程式导航情况下
回调函数(){
this.$router.push({path:"/hello", query:{id:666,name:'小明'}})
}
若路由配置了name属性,则可使用name属性指定跳转,不指定也可使用path=“”。params传参则不一样,必须要求路由配置name属性,并且跳转时必须要指定name跳转!
3. params传参
(1)声明式导航情况下
1)步骤1:
<!--
name:router文件夹下,配置路由时需要多配置一个属性——name,这也是和query传参的不同之处
-->
<router-link :to="{
name='小鬼'
params:{
id:666
name:'小明'
}
}">
标签体内容
</router-link>
2)步骤2:
router文件夹下,配置路由时需要多配置一个属性——name,这也是和query传参的不同之处。
3)步骤3:
router文件夹下,配置路由时需要在path属性的字符串中使用占位符,这也是和query传参的不同之处。
占位符语法:英文冒号+传参参数名
举例:
path='/hello/:id/:name'
(2)编程式导航情况下
1)步骤1:
回调函数(){
this.$router.push({name:"小鬼", params:{id:666,name:'小明'}})
}
2)步骤2:
同上
3)步骤3:
同上
参考:https://blog.csdn.net/G_Z_X/article/details/123487587
举例:尚品汇第8集
https://www.yuque.com/u22137022/mxlsc1/niecl1
3. 后续补充:
(1)动态的query传参
我称它为变种的query传参
尚品汇第27集
部分代码:
goSearch(event) {
let element = event.target;
let { categoryname, category1id, category2id, category3id } =
element.dataset;
let location = { name: "search" };
let query = { categoryname: categoryname };
if (categoryname) {
if (category1id) {
query.category1Id = category1id;
}
if (category2id) {
query.category2Id = category2id;
}
if (category3id) {
query.category3Id = category3id;
}
}
location.query = query;
this.$router.push(location);
},
看这几行:
let location = { name: “search” };
let query = { categoryname: categoryname };
query.category1Id = category1id;
query.category2Id = category2id;
query.category3Id = category3id;
location.query = query;
this.$router.push(location);
解释:
- this.$router.push(对象location) //发请求
- 这个对象location中内嵌一个query对象。
- 然后让query.~ = ~; 直接指定即可!!!
(2)vue路由params参数可传可不传写法?
什么意思?就是若不指定params参数的值,就不传params参数。
- 参数可传可不传的写法 在占位符后面加?
routes: [
{
path: "/home/:id?",
},
];
更多推荐
所有评论(0)