四. 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?",
  },
];