vue中返回如何携带参数 并对其优化封装

A页面 =>B页面 B页面返回携带参数给A页面

定义一个bus.js文件 export default new Vue()

通过B页面bus.$emit 传值  和  A页面bus.$on 接受来实现

我们可以通过路由对其封装

1.定义一个bus.js

import Vue from 'vue'
import router from "../router";
const bus = new Vue()
  const back = (datas,backNum) => {
    // datas 为需要返回传的数据  backNum 为返回的层级
    bus.$emit('backHis',{ datas }) 
    router.back(backNum)
  }
  const on = (methods) => {
    bus.$on('backHis',function(datas){
      //这里的methods是A页面接受参数的回调函数
      methods(datas)
    })
  }
export { back , on }

2.在路由端进行配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import { back , on } from "../utils/bus";
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta:{
      on, //A页面
    },
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    meta:{
      back, //B页面
    },
  }
]
const router = new VueRouter({
  routes
})

export default router

3.在页面端我们可以直接调用 

//A页面

 created(){
    const bus = this.$route.meta.on
    bus((datas)=>{
      console.log(datas);
    })
  },

//A页面



//B页面

<template>
  <div>
    <button @click="back">返回</button>
  </div>
</template>

<script>
export default {
  methods:{
    back(){
      const bus = this.$route.meta.back
      bus("数据","-1")
    }
  }
}
</script>

//B页面