Vue路由/页面跳转传参的四种方式

方法一 query传参

$router //全局路由对象
$route //当前路由对象
通过在链接后"?"拼接传递

//跳转
this.$router.push('/b?name=bob')

//获取
this.$route.query;  //{name:'bob'}

方法二 params传参

1.在router中配置参数

2.以相同路径结构发送

this.$router.push('/B/bob/2333');

3.通过当前路由对象获取

 this.$route.params; //{name:"bob",id:2333}

此种方式传参，若缺少参数，将导致路由无法被识别

方法三 将参数转化为props

通过$route获取还不够简洁，可以转化会props传参

1. 将props属性设置为true
   
   2.以相同结构发送

this.$router.push('/B/bob/2333');

3.将name,id作为props方式接收

方法四 通过路由别名跳转传参

1.设置路由别名

2.带参数跳转

this.$router.push({
                    name:"componentB",
                    query:{name:"bob",id:"2333"},
                    params:{name:"jack",id:"5555"}
                  })

3.接收