前言：这个问题是我之前做的一个移动端练手小demo时出现的问题，需求是最后点击另一个路由上的提交按钮时，将之前路由用户选择的数据提交给后台，我想不到别的方法，最终在这么一个小demo中使用了vuex，下面是我看其他博客总结的一些方法

---

1.路由传值

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 会被忽略,注意匹配问题

2.通过父子组件中的数据传递

通过parent,chlidren等方法调取用层级关系的组件内的数据和方法

this.$parent.$data.id  //获取父元素data中的id
this.$children.$data.id  //获取父元素data中的id

3.通过EventBus传递数据

EventBus的简介

EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。

简单使用非全局的EventBus

1）创建一个EventBus.js文件，实质上他是一个不具备dom元素的组件，他仅仅只具有实例的方法，我们需要的也只是他实例中的方法而已

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

2）发送事件
在需要发送事件的组件中import引入EventBus，并且使用EventBus发送事件

EventBus.$emit(’事件名‘,{num:this.num,deg:this.deg});

3）接收事件
在需要接受EventBus的组件中引入EventBus，并使用EventBus接收事件

EventBus.$on('事件名',(num,deg)=>{} )

4）只监听一次

EventBus.$once('事件名',(num,deg)=>{} )

5）移除事件监听者

import { eventBus } from './event-bus.js'
EventBus.$off('decreased', {})

全局EventBus的简单使用

在main.js文件中引入EventBus

var EventBus = new Vue();
Object.defineProperties(Vue.prototype, {
    $bus: {
        get: function () {
            return EventBus
        }
    }
})

这样在其他组件中就可以通过vue使用EventBus来发出和接收事件

this.$bus.$emit('nameOfEvent',{ ... pass some event data ...});
this.$bus.$on('nameOfEvent',($event) => {})

4.params传参和query传参

上面已经聊到了params传参和query传参，所以我们来说一下他们之间的区别
1）用法上：刚query要用path来引入，params要用name来引入，接收参数都是类似的，分别是

this.$route.query.name
this.$route.params.name

2）展示上：query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
3）对于路由：params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系。params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。
比如：跳转/router1/:id

<router-link :to="{ name:'router1',params: { id: status}}" >正确</router-link>

<router-link :to="{ name:'router1',params: { id2: status}}">错误</router-link>

4）params、query不设置也可以传参，params不设置的时候，刷新页面或者返回参数会丢失
5）query路由无需改动path规则，params需要设置路由规则比如：path:’detail/:id’

5.Vuex

这当然是项目复杂的时候最推荐的方法