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

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

问题描述

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

解决办法

1. 假设我们需要点击一张图片，然后跳转到另外一个页面，需要在另一个页面中接受来自这张图片的参数。那么我们就用到了标签。
2. 首先在图片所在的组件中使用包裹它。

    <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来查找和接受这个参数的值。

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