vue中路由传参的2种方法（按照query和params 分类的）

一、query传递参数

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

第1种：
单个的参数可以写在请求的url中，直接以？连接即可，比如：

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

获取：用query获取

this.$route.query.uid

第2种：
多个参数的情况下也可以使用对象的形式，跳转通过匹配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

第3种：
直接在路径后面拼接参数


this.$router.push('路径？参数名=参数值')

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


this.$route.query.参数名

二、params传参

params传参可以认为是post的方法，这种传参方法是看不到参数的，获取的时候通过params来获取。
通过name来匹配相应的组件。
(重点：通过name 来匹配组件的)

第1种：


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

//路由配置文件：

{       name:gameInfo,
        path:'/gameInfo/':uid/:gameid
        component:()=>import('./views/gameInfo')
}

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

获取：使用params获取


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

第2种：
push跳转路由，传入对象时，用下面的方法传参：

this.$router.push({
        name:'gameInfo', // 这就是前面说到使用的是 name 进行组件的匹配
        params:{
            gameId:3,
            userId:2
        }
})

//路由中的配置：

{
        path:'gameInfo',
        name:gameInfo,
        component:()=>import('./views/gameInfo')
}

获取：使用params获取


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

还可以按照：声明式导航 router-link 和编程式导航 this.$router.push() 来进行分类；
我是按照 query 和 params 来进行分类的，这样我个人看着比较清晰，依据个人喜好而定；

本博客参考以下而做出的总结：
作者：Free_syx 链接：https://www.jianshu.com/p/c63372225cc8