vue页面跳转并传递参数

vue页面跳转并传递参数首先注册一个页面Underrank.vue,在main.js中配置路径{path:’/underrank’,name:’underrank’,component:()=>import(‘@/views/inner/UnderRank’)},在需要页面跳转的地方添加<router-link:to=”{name:’underrank’,params:{rankid:ite

大家好,欢迎来到IT知识分享网。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 }`)
  },

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/15039.html

(0)
上一篇 2024-02-21 17:45
下一篇 2024-02-21 21:15

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信