路由传参的三种方法

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跳转