vue.js - vue的路由如何传递参数？第二个页面如何拿到参数

问题描述

问 题

路由main.js

{
    name:'hotel',
    path:'/hotel/:id',
    component:Hotel
}

1. list.vue页面 <router-link :to="{path:'/hotel/'+item.id}">是这样子的，我想把item.id传给hotel.vue页面，。点击url会跳转到http://localhost:8080/#/hotel/1

2. 我在hotel.vue页面中

  mounted(){
      console.log(this.$vm.$route.params) //
      //我想在这里得到参数,会报下面这个错误
//$route is not defined
  }

得不到参数?怎么做

另外 如果改成下面<router-link :to="{path:'/hotel',params:{id:item.id}}">这样,http://localhost:8080/#/hotel不知道为什么连后缀都没了

解决方案

一、楼主可以在hotel.vue中打印一下this.$route,可以发现你在进行跳转的时候没有手动传递params。可以通过this.$route.path拿到你当前路由的path值，里面包含了你的传递的item的id。

二、楼主如果想通过params的方式在路由之间传递参数，需要在切换路由的时候动态传递params，有以下两种方式：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

router.push({ name: 'user', params: { userId: 123 }})

这样的话你就可以在this.$route对象中拿到传递的params值了

这篇关于vue.js - vue的路由如何传递参数？第二个页面如何拿到参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！