使用路由解决页面中的跳转传参问题

最新推荐文章于 2023-09-20 18:01:53 发布

x65456

最新推荐文章于 2023-09-20 18:01:53 发布

阅读量273

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/x65456/article/details/128587376

版权

文章介绍了在Vue应用中如何利用路由<router-link>解决页面间的跳转和参数传递问题。通过将参数放在query对象中，可以在目标页面的created生命周期钩子内通过this.$route.query获取传递的参数，实现数据的传递。

摘要由CSDN通过智能技术生成

问题描述

我们有时候需要解决这样一个问题。就是不同页面之间的传参和使用。
vue中的路由很好的解决了这个问题。

解决办法

    <router-link :to="{path:'/XiangQing',query:{courseId:item.courseId}}">
      <img :src="item.coverFileUrl" alt="">
      </router-link>

3然后使用：to来绑定这个传参。
4其中path是跳转到的页面路径，query里是需要传递的参数。
5然后来到跳转页面的组件里

  //接收参数
  created() {
  console.log(this.$route.query.courseId)
  }
}

6.在它的created生命周期中使用this.$route.query来查找和接受这个参数的值。

这样就是使用路由进行页面间的传参。

关注