路由传参的三种方法

1、query传递参数

query传参可以认为是get传参,参数会在请求的url中显示出来,以?,&连接。

单个的参数可以写在请求的url中,直接以?连接即可,比如

<router link to='/gameInfo?uid='+uid

获取的时候用query获取

this.$route.query.uid


多个参数的情况下也可以使用对象的形式,跳转通过匹配router的path去相应的组件,比如:

this.$router.push({

    path:'/gameInfo',

    query:{

        uId:123,

        gameId:3

    }

})

{

    path:'/gameInfo',

    name:gameInfo,

    component:()=>import('./views/gameInfo')

}

获取的时候依然是用query去获取相应的参数

this.$route.query.uId             this.$route.query.gameId


2、params传参

params传参可以认为是post的方法,因为他的一种传参方法是看不到参数的,获取的时候通过params来获取。通过name来匹配相应的组件。

2.1 参数写在url中动态绑定,在path中用:(id)id代表要接收的参数

<router link :to='/gameInfo/'+uid+"/"+gameid

路由:

{

        path:'/gameInfo/':uid/:gameid

        name:gameInfo,

        component:()=>import('./views/gameInfo')

}

像这样在url中传入一个参数,这个参数可以是data中的一个数据,也可以是一个动态的参数,在gameInfo页面接收参数的时候用params接收,比如:

this.$route.params.uid  这里的uid是路由中:后边的参数


2.2 push跳转路由,传入对象时,用下面的方法传参:

this.$router.push({

        name:'gameInfo',

        params:{

            gameId:3,

            userId:2

        }

})

路由中的配置:

{

        path:'gameInfo',

        name:gameInfo,

        component:()=>import('./views/gameInfo')

}

这种方法在获取的时候也是一样使用params获取

this.$route.params.gameId        this.$router.params.userId


总结:query传参通过path跳转,params传参通过name跳转

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容