一、传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示参数两种方式。
1.params 传参(显示参数)又可分为 声明式 和 编程式 两种方式。
声明式router-link:该方式是通过router-link组件的to属性实现,子路由需要提前配置好参数。
<router-link :to="/child/1"> 跳转到子路由 </router-link>
路由的配置:
{
path: '/child/:id',
component: Child
}
编程式 this.$router.push:同样需要子路由提前配置好参数。
{
path: '/child/:id',
component: Child
}
this.$router.push({path:'/child/${id}'})
接收: this.$route.params.id
编程式接收的参数会是'${1}'这样的,用正则把它弄出来:
const templateString = this.$route.params.id;
const regex = /\${(\d+)}/;
const match = templateString.match(regex);
console.log('match的值', match);
if (match) {
const paramValue = match[1];
console.log(paramValue); // 输出: 1
}
2. params传参(不显示参数)也可分为声明式和编程式两种方式,与显示参数不同的是,这里是通过路由的别名 name 进行传值的,不能用path,不然参数传不过去。
声明式:<router-link :to="{name:'Child',params:{id:1}}">跳转到子路由</router-link>
路由的配置:
{
path: '/child,
name: 'Child', // 路由别名
component: Child
}
编程式:
this.$router.push({
name:'Child',
params:{id:1}
})
接收: this.$route.params.id
3.query 传参(显示参数)也可分为 声明式 和 编程式 两种方式。
声明式router-link:该方式是通过 router-link 组件的 to 属性实现,不过使用该方式传值的时候,需要子路由提前配置好路由别名。
{
path: '/child,
name: 'Child',
component: Child
}
<router-link :to="{name:'Child',query:{id:1}}">跳转到子路由</router-link>
不使用路由别名:
{
path: '/child,
component: Child
}
把name改成path,'Child'改成'/child':
<router-link :to="{path:'/child',query:{id:1}}">跳转到子路由</router-link>
编程式 this.$router.push:使用该方式传值的时候,同样需要子路由提前配置好路由别名(name 属性)
{
path: '/child,
name: 'Child',
component: Child
}
this.$router.push({
name:'Child',
query:{id:1}
})
要是不用别名的话和上面声明式里提到的一样。
接收: this.$route.query.id
二、query和params传参的不同之处。
1.query传参的配置可以是path,也可以是name,只不过使用name的时候需要在路由配置相应的别名name;params传参的配置也可以是path或者name,使用name的时候同样需要设置别名,否则参数过不去。(是不是感觉上面乱起八糟的,我也觉得,平时用的话就记住query配合path使用,params配合name使用就好了,记不了那么多)
2.query在路由配置不需要设置参数,而params必须设置,设置后页面刷新就不会丢失参数。(这里的必须是指从版本vue-router@3开始,否则params的参数传不过去;vue-router@2版本的时候不设置params的参数第一次可以传,但页面刷新后参数会丢失,就是第4条中提到的params)
3.query传递的参数会显示在地址栏中,params的话要看用什么版本的vue-router,vue-router@3以前的不在路由配置中设置参数就不会显示,页面刷新还会丢失,设置了就不会。(又一次强调了vue-router版本条件下的第4条有关params的说明)
4.params传参刷新会无效,但是query会保存传递过来的值,刷新不变 。