vue 项目中页面跳转如何带参数?

发布于 2022-09-06 10:11:21 字数 404 浏览 8 评论 0

由于图片无法上传,所以我用文字说明:

有两个页面,一个是 info 页(显示个人信息的页面),如下:


姓名:小明
手机:18503118888


一个是 update 页(点击手机号进入此页)


手机:18503118888
验证码:...


问题是这样的:我从 info 页点击手机号进入 update 页,
需要把手机号一起传过去,如何做呢?(update 页的手机号肯定不是从服务器请求来的吧)

我尝试写了一个 evenbus,然后在 info 页 bus.$emit('phone', this.phone) ,然后在 update 页的 created 钩子里监听 bus.$on('phone', phone) ,但是传不过来,应该如何写呢?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

晚雾 2022-09-13 10:11:21

没有用vue-router路由传参吗?
跳转页

this.$router.push({name:'路由命名',params:{参数名:参数值,参数名:参数值}})

接收页

this.$route.params.参数名
太阳男子 2022-09-13 10:11:21

传值:链接地址后面拼接字符串 /update?n=18503118888
取值:this.$route.query.n

梦一生花开无言 2022-09-13 10:11:21
this.$router.push({path: 'xxx', query: {aaa: 1}})

=> xxx?aaa=1 地址栏会这样显示

取地址栏参数:

this.$route.query.aaa
橘虞初梦 2022-09-13 10:11:21

楼上的两位的方法都可以用,如果你要把phone设为必传的话,还可以这样:
index.js页面

{
   path: '/info/:phone',
   name: 'info',
   component: info,
   props: true
}

info页传参:

<router-link :to="/info/13800138000">我的订单</router-link>

update页接收:

props: ['phone'],
watch: {
  phone(v) {
    console.log(v)
  }
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文