vue跳转传参的方法:1、通过router-link标签的params或query属性进行跳转传参;2、通过“this.$router.push({name:'路由命名',params:{参数名:参数值..}})”语句进行跳转传参。

本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。
首先创建readDetail.vue 且在index.js中注册路由。
传递页面方式:
<router-link
:to="{
path: 'yourPath',
params: {
key: 'value', // orderNum : this.searchData.orderNo
},
query: {
key: 'value', // orderNum : this.searchData.orderNo
}
}">
<button type="button">跳转</button>
</router-link>
1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航
2. params -> 是要传送的参数,参数可以直接key:value形式传递
3. query -> 是通过 url 来传递参数的同样是key:value形式传递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.参数名
实验(包含两种方式):
传递页:
<router-link :to="{ name: 'readDetail', params: { msgKeyOne: 'jump test.' }}">
<button type="button">跳转</button>
</router-link>
<button @click="sendParams">传递</button>
-----------------------------------------------------------------------------------------
export default {
name: 'reads',
data () {
return {
msg: 'msg test.'
}
},接收页:
<p class="container">
<p style="color:red;">Num:{{ myIndex }}</p>
<p>{{ msg }}</p>
</p>
-----------------------------------------------------------
data () {
return {
msg: '',
// 保存传递过来的index
myIndex: ''
}
-----------------------------------------------------------
mounted: function () {
this.msg = this.$route.params.msgKeyOne
this.myIndex = this.$route.params.msgKey
console.log(this.myIndex)
}实验结果:

相关推荐:《vue.js教程》
以上就是vuejs中跳转如何传参的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号