vue页面跳转并传递参数

首先注册一个页面Underrank.vue，在main.js中配置路径

{ path: '/underrank', name: 'underrank', component: () => import('@/views/inner/UnderRank') },

在需要页面跳转的地方添加

<router-link
        :to="{
          name: 'underrank',
          params: {
            rankid: item.rankid,
          },
        }"
      >
      </router-link>

也可以通过this.$router.push添加。

 在Underrank.vue中，在mounted函数中通过 this.$route.params.rankid获取到参数值。

 data() {
    return {
      rankid: 0
    }
  },
  mounted() {
    this.rankid = this.$route.params.rankid
    console.log(`rankid :${this.rankid }`)
  },