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栈中添加了一个记录,当点击浏览器返回按钮时,会回退到上一个页面。