摘要:Vue项目中有个小需求,从A页面带多个参数跳转到B页面,B页面使用出入参数查询并显示,同时再次切换到A页面时依然记忆原有的数据。
Vue-Router实现路由带参数跳转,有多种可行方式,简单记录下这几种方案的使用和特点:
1. Vue-Router带参数跳转
1.1 动态路由
使用动态路由可以在路由配置中定义带参数的路由,参数会作为路由路径的一部分,直接体现在 URL 中。
// 1.路由配置文件中 配置动态路由
{ path: '/user/:id', name: 'User', component: User }
// 2.跳转到动态路由
this.$router.push('/user/123');
// 3.跳转后页面获取参数
this.$route.params.id
1.2 query属性传值
使用query属性传值可以在路由跳转时通过 URL 查询字符串传递参数,适用于需要传递较多参数或不希望将参数直接暴露在 URL 中的场景。
// 1.路由配置文件中 配置动态路由
{ path: '/user', name: 'User', component: User }
// 2.跳转时
this.$router.push({ **path: '/user'**, query: { id: 123 } });
// 3.跳转后页面获取参数对象
this.$route.query
1.3 params属性传值(与query属性传值类似)
// 1.路由配置文件中 配置动态路由
{ path: '/user', name: 'User', component: User }
// 2.跳转时
this.$router.push({ **name: 'User'**, params: { id: 123 } });
// 3.跳转后页面获取参数对象
this.$route.params
上述三中参数传递方式区别:
- 通过动态路由和query属性传值获取参数,页面刷新参数不会丢失, 但params传值会丢失 ;
- 动态路由一般用来传一个参数时居多, 而query、params可以传递一传递多个参数 。
综上此处,使用query属性传值实现,至于保存跳转前的页面直接使用sessionStotage保存。
2. 功能实现
具体实现如下:首先,在A页面触发跳转B页面时,使用query携带多个参数,并将需要记忆的数据保存sessionStorage中。
goToPageB(param1) {
// 在路由跳转时传递多个参数
sessionStorage.setItem('pageAData', JSON.stringify(this.queryParams));
this.$router.push({
path: '/real-time-monitor',
query: {
applianceId: param1,
startTime: this.queryParams.startTime,
endTime: this.queryParams.endTime
}
});
},
然后, B页面创建时,判断this.$route.query是否有携带数据,是则使用传入的数据,完成接口querySessionList的调用。
created() {
console.log('Received parameters:', this.$route.query);
if (Object.keys(this.$route.query).length > 0) {
this.queryParams.applianceId = this.$route.query.applianceId
this.queryParams.startTime = this.$route.query.startTime
this.queryParams.endTime = this.$route.query.endTime
this.querySessionList()
}
},
最后,为实现切换到A页面可保存状态,将跳转前保存在sessionStorage中的数据读取并使用;
mounted() {
if(sessionStorage.getItem('pageAData')) {
this.queryParams = JSON.parse(sessionStorage.getItem('pageAData'))
sessionStorage.removeItem('pageAData');
}
},
推荐篇Vue Router写的挺全面的博客: