Vue-Router实现带参数跳转，并且保存原页面数据记录

摘要：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写的挺全面的博客：

 一文详解Vue中实现路由跳转传参的4种方式（十分详尽）_vue路由跳转传参-CSDN博客