router路由的不同传参方式

router路由

1.params 和 query的比较

query：query可以通过name来引入路由也可以通过path（父组件前的路径必须要加 / ）引入；接收参数this.$route.query.name；地址栏通过 ”?属性1=值1&属性2=值2“ 传值；query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数

params：params只能通过name来引入路由；接收参数this.$route.params.name；地址栏中只有参数值，没有属性，相对安全；params相当于post请求，参数不会再地址栏中显示

2. $ router和$ route的区别

$router : 是路由操作对象，只写对象
$route : 路由信息对象，只读对象

3.简单标签的使用

传递

<-- query 通过 path 切换路由 -->
<router-link :to="{path: 'page1', query: { id: 1 }}">前往page1页面</router-link>
<-- params 通过 name 切换路由 -->
<router-link :to="{name: 'page1', params: { id: 2 }}">前往page1页面</router-link>

接收

//vue实例被生成后会调用这个函数
created () {
	// query 通过 this.$route.query 接收参数
	const id = this.$route.query.id;
	// params 通过 this.$route.params 来接收参数
	const id = this.$route.params.id;
}

4.函数的使用

4.1、/:id 和 params(/:是占位符，类似jdbc中mysql的参数传递一样)

在路由文件（index.js）的 path 中添加 /:id 来匹配 $router.push 中 path 携带的参数。页面刷新，数据会保留。（地址栏中只是参数值）
页面

<div @click="skips(1)">查看全部</div>

传参

methods: {
	skips(id) {
		// 直接调用 $router.push 实现携带参数的跳转
		this.$router.push({
			path: `/details/${id}`
		});
	}
}

路由配置

{
	path: '/details/:id',
	component: details
}

接收

this.$route.params.id