vue-router传递参数的方式

参考：https://blog.csdn.net/crazywoniu/article/details/80942642

一、vue-router路由跳转分为两大类

1、编程式的跳转：router.push

2、声明式的跳转：<router-link>

二、编程式的跳转分为三种

1、this.$router.push("detail")：detail为要跳转的路由地址，该方式简单但无法传递参数。

2、this.$router.push({name:"detail",params:{personId:33}})：detail为要跳转的路由地址，params为传递的参数，目标页面可以使用this.$router.params.personId来获取传递的参数，该方式有一个缺点就是在目标页面刷新时传递过来的参数会丢失。

3、this.$router.push({path:"/detail",query:{personId:33}})：detail为要跳转的路由地址，query为传递的参数，目标页面使用this.$router.query.personId来获取传递的参数，该方式会把传递的参数放在url上，如：localhost:8080/#/detail/?personId=33。

三、声明式的跳转分为三种（优缺点与编程式相同）

1、<router-link to="detail">跳转到详情页</router-link>

2、<router-link :to="{name:'detail',params:{personId:33}}">跳转到详情页</router-link>

3、<router-link :to="{path:'/detail',query:{personId:33}}">跳转到详情页</router-link>