vue 路由跳转传参

vue 路由携带参数跳转的三种方法

第一种：router-link

<router-link to="{name:'home', params: {id:7}}" />  // params
<router-link to="{name:'home', query: {id:7}}" />  // query

在点击router-link跳转路由时，其实在内部调用的就是 router.push()方法，所以说，点击 < router-link :to="…" > 等同于调用 router.push(…)。

第二种：this.$router.push()

//params传参,使用name
this.$router.push({
	name: 'home', // 路由名称
	params: { // 传递参数
		id: 7
	}
})
//params传参,使用path
this.$router.push({
	path: '/home', // 路由
	params: { // 传递参数
		id: 7
	}
})
//params取参
const id = this.$route.params.id // 7

• 注： 使用params方式传参时，路由需要配置参数占位符，如果不配置，第一次跳转到该路由可以拿到参数，当刷新页面后，参数就会丢失。配置方式如下（两种方式均可）：
  • path: ‘/home:id’
  • path: ‘/home/:id’

//query传参，使用name
this.$router.push({
	name: 'home', // 路由名称
	query: { // 传递参数
		id: 7
	}
})
//query传参，使用query
this.$router.push({
	path: '/home', // 路由
	query: { // 传递参数
		id: 7
	}
})
//query取参
const id = this.$route.query.id // 7

• params和query的区别：
  • query类似于get请求，路由跳转时，会把所传的参数直接拼接到url路径后边，如：/home?id=1 ,所以页面刷新，参数一直存在。（传非重要信息时，可选query方式）
  • params类似于post，路由跳转时，参数不会在url中出现，所以在不配置路由占位符的情况下，刷新页面，参数会丢失。（传重要信息时，可选择用params方式）

第三种：this.$router.replace()

this.$router.replace() 用法同上方的 push() 一样，唯一的区别就是：

• this.$router.replace() 会更改history浏览器记录，相当于替换浏览器当前的浏览地址，当点击浏览器的返回时，不会再出现上一个页面。
• 而push在跳转路由时，实际上是向浏览器的history栈中添加了一个记录，当点击浏览器返回按钮时，会回退到上一个页面。