前言

搭建网站时，一般都会遇到页面跳转需要传递参数的问题，我研究了一下,总结出以下三种方法

使用路由带参数传递数据

A页面代码

handleHistory(e, rowData) {
    this.ruleid = rowData.id
    this.$router.push({
      name: 'AlarmHistory',
      params: {       
        ruleid: this.ruleid
      }
    })
},
1.name  -> 是要跳转的路由路径，在router文件里配置，也可以用path进行路径导航，但是path不能进行参数传递
2.params -> 是要携带的参数，参数形式为 key: value 若参数数目过多时，建议考虑本地存储
3.参数也可以采用query ,但是这个参数会显示在url上，容易被误改导致出错。通过query传递参数，页面刷新后，数据不会消失。但是params刷新后会消失

B页面代码

created() {
this.ruleid = this.$route.params.ruleid
this.selectHistoryByPageList(this.currentPage, this.pageSize, this.ruleid)
  },

实现效果(A页面点击报警历史)：

跳转后页面结果(B页面获取存储到的数据进行查询)：

使用web storage进行数据传递

使用localStorage或sessionStorage进行本地存储时，数据刷新后不会消失。
我需要在页面相应行点击报警历史，跳转到另一个页面后查询该行规则的对应报警历史，代码如下：

A页面代码：

B页面代码：

这种实现方法是在页面刷新后数据会消失的。若想数据不消失，只需要不请空本地存储就好啦。

使用vuex进行数据传递

通过dispatch来分发action方法从而commit mutation 最后改变state的属性值
vuex.action 只能传递两个参数，一个state是自动添加的，一个payload,是用户自己传到。
但是如果你传了两个参数，你会发现第二个永远都是undefined。
正确的操作
把多个参数打包为一个对象，放到payload里
dispatch：含有异步操作，例如向后台提交数据，写法：

this.$store.dispatch('mutations方法名',值)

总结：对比本地存储可以发现，若想数据刷新后消失选择路由带参数方法比较好，代码量较少，若想数据不消失，选择本地存储较好。