vue-router传递参数

一、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.$route.params.personId来获取传递的参数，该方式有一个缺点就是在目标页面刷新时传递过来的参数会丢失。

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

注意！！！
获取参数是 this.$route.query.** 或者this.$route.params.****
使用this.$router.query.**/params.***是无法获取到参数的

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

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>

vue router

版权所有 © 【代码谷】 欢迎非商用转载，转载请按下面格式注明出处，商业转载请联系授权，违者必究。（提示：点击下方内容复制出处）

源文：《vue-router传递参数》，链接：https://www.daimagu.com/article/814.html，来源：【代码谷】