How to realize Jump transfer parameters in vuejs

这篇文章将为大家详细讲解有关vuejs中怎么实现跳转传参，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

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

本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

首先创建readDetail.vue 且在index.js中注册路由。

传递页面方式：

1.通过router-link进行跳转 跳转 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) }关于"vuejs中怎么实现跳转传参"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。