Vue中采用back()或go(-1)传值

需求：首页选择一些筛选条件，进入添加页后再返回，筛选条件初始化了，返回采用的back()无法传值，故可采用bus操作。

新建eventBus.js,注册一个公共bus

import Vue from 'vue'

let eventBus = new Vue({})

export default eventBus

index.vue中各个组件在data中绑定的对象

listQuery: {
  page: 1,
  rows: 20,
  name: '',
  type: '',
  status: '-1',
  project_id: '',
  team_id: '',
  partner_id: '',
  customer_id: '',
  start_time: '',
  end_time: '',
  index_start_time: '',
  index_end_time: '',
  custome_field: ''
},

例如我们进入'添加'页，此时先把listhQuery存进query中

this.$router.push({
  path: 'order/add',
  query: {
    listQuery: {
      ...this.listQuery
    }
  }
})

add.vue先进行接受

created() {
  this.query = this.$route.query
  this.initData()
},

add.vue中的返回组件

<back-page :query="query"/>

backPage.vue

<template>
  <div class="back">
    <el-link type="info" @click="backPage()">返回</el-link>
  </div>
</template>

<script>
  import eventBus from '@/helper/eventBus'
  export default {
    name: "BackPage",
    props: [ 'query' ],
    //在destoryed周期中调用bus，否则index.vue接收的数据变化但视图未及时更新
    destroyed() {
      eventBus.$emit('query',this.query)
    },
    methods: {
      backPage() {
        this.$router.back();
      }
    },
  }
</script>

<style scoped>
  .back {
    width: 100%;
    padding: 12px 20px;
    background: white;
  }
</style>

最后一步index.vue

beforeMount() {
  this.resetListQuery = { ...this.listQuery }
  //此处进行bus接收赋值操作，注意：一定要在请求数据前先赋值，故把fetchData函数丢在了mounted周期中执行
  this.Bus()
},
mounted() {
  this.fetchData()
  this.max_height = window.innerHeight - 70;
},
beforeDestroy() {
  //此处销毁bus，避免this.Bus()执行多次影响性能
  eventBus.$off('query')
},
watch: {

},
computed: {

},
methods: {
  Bus() {
    eventBus.$on('query',(data)=> {
      this.listQuery = { ...data.listQuery }
      this.times = [ this.listQuery.start_time, this.listQuery.end_time]
      this.index_times = [ this.listQuery.index_start_time, this.listQuery.index_end_time ]
    })
  },
}