四. query 和 params 传参的区别(编程式/路由式导航)

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)声明式导航情况下


<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:


<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);
解释:

  1. this.$router.push(对象location) //发请求
  2. 这个对象location中内嵌一个query对象。
  3. 然后让query.~ = ~; 直接指定即可!!!

(2)vue路由params参数可传可不传写法?

什么意思?就是若不指定params参数的值,就不传params参数。

  • 参数可传可不传的写法 在占位符后面加?
routes: [
  {
    path: "/home/:id?",
  },
];

你可能感兴趣的:(vue2,vue)