vue-router传递参数的方式

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

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

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

2、声明式的跳转:

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

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、跳转到详情页

2、跳转到详情页

3、跳转到详情页

你可能感兴趣的:(vue-router传递参数的方式)