本文详细介绍了在Vue中如何通过`router-link`和`$router.push`方式实现页面间的跳转，并传递多个参数。通过`params`和`query`属性分别在URL中隐藏和显示传递的数据。在接收页面中，使用`this.$route.params`和`this.$route.query`获取传递的参数。提供了一个包含两种方式的实验案例，帮助理解参数传递的过程。
首先创建readDetail.vue 且在index.js中注册路由。
传递页面方式：
1.通过router-link进行跳转
:to="{
path: 'yourPath',
params: {
key: 'value', // orderNum : this.searchData.orderNo
},
query: {
key: 'value', // orderNum : this.searchData.orderNo
}
}">
跳转
1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航
2. params -> 是要传送的参数,参数可以直接key:value形式传递
3. query -> 是通过 url 来传递参数的同样是key:value形式传递
2. $router方式跳转
this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}})this.$router.push({
path: 'yourPath',
name: '要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找',
params: {
key: 'key',
msgKey: this.msg
}
/*query: {
key: 'key',
msgKey: this.msg
}*/
})
接受方式
this.$route.params.参数名
this.$route.query.参数名
实验(包含两种方式)：
传递页：
跳转
传递-----------------------------------------------------------------------------------------
export default {
name: 'reads',
data () {
return {
msg: 'msg test.'
}
},
接收页：
Num：{{ myIndex }}
{{ msg }}
data () {
return {
msg: '',
// 保存传递过来的index
myIndex: ''
}
-----------------------------------------------------------
mounted: function () {
this.msg = this.$route.params.msgKeyOne
this.myIndex = this.$route.params.msgKey
console.log(this.myIndex)
}
实验结果：
作者：张中华
链接：https://www.jianshu.com/p/c699c4d197de
1451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
