实现vue 页面正反向传值的几种方法(详解)

一.Vue页面正向传值

我们总是在项目中遇到，页面A跳转到页面B时，传值给页面B，这种方式众所周知很容易实现，下面就以本人商城项目中的商品列表点击跳转到商品详情页需要传商品ID到商品详情页。

方法1. 路由里的query传参

goodsDetails: function (id) {
      this.$router.push({
        path: 'productDetails',//path或name都可
        query: {
          id: id
        }
      })
    },

方法2. 路由里的params传参

goodsDetails: function (id) {
      this.$router.push({
        name: 'productDetails',//只可是name
        params: {
          id: id
        }
      })
    },

 params 与 query这两种传参方式有什么区别呢？

 相同点：都是以对象形式接受参数,分别是this.$route.query.name和this.$route.params.name。

不同点：1) .query传参时可用name或Path来引用路由，params 和path不能共存 所以只能用name引用路由。

                    注意接收参数的时候，已经是$route而不是$router了哦！！

               2). query在浏览器地址栏中显示参数， 如图：

                    params后者则不显示参数，如图：

             3). query传参，刷新页面不会丢失参数。但是params会丢参的。         

 二.Vue页面反向传值

    在项目中，选中地址自动返回页面并且展示选中后的收货地址，因为返回页面时用的$router.go(-1),搜索这个方法可以带参数吗？发现不可以，那我们就用换用其他思路，用缓存！NO！太复杂，太不合理！看下面：

 方法1. 钩子函数 beforeRouteLeave (to, from, next)     

方法beforeRouteLeave离开路由之前执行的函数。to:router 即将要进入的路由对象 ,from:router  当前导航正要离开的路由,next()进行管道中的下一个钩子,要确保调用next方法，否则钩子不会被resolved。

具体使用如下:

// 点击后拿到数据返回给下单地址
  beforeRouteLeave (to, from, next) {
      if (to.name === 'home') {
        to.query.temp = '这里是参数，选中后的地址'
      }
      console.log(to)
      console.log(from)
    next()//必须要有这个，否则无法跳转
  },

    在home页面的mouted方法中就可利用this.$route.query.temp获得上一页面返回的参数啦！

   方法2. vue事件发射与接收(类似IOS的通知)

       受移动端的思想，在IOS项目中有时总是用到通知方式完成传值回调，又加上之前小程序也有类似通知的方法，猜想Vue中应该也支持这种思想，拜读了各位大神的分享，vue2.0中可以使用 $emit, $on, $off 分别来分发、监听、取消监听事件。具体使用方法如下步骤:

1).给data添加一个 名字为eventhub 的空vue对象,就可以在任何组件都可以调用事件发射接收的方法了，在main.js中添加：

new Vue({
  el: '#app',
  router,
  data: {
    eventHub: new Vue()
  },
  render: h => h(App),
  components: { App },
  template: '<App/>'
})

2).在home组件内调用事件接受参数（$on监听）

mounted(){
    this.$root.eventHub.$on('事件名称', (data)=>{
      console.log('接受到的参数：'+data)
    } )
  },

3）在adress组件内调用事件触发 ($emit分发)

 //通过this.$root.eventHub获取此对象
this.$root.eventHub.$emit('事件名称', '这里是参数，选中后的地址')

4). 在home组件中销毁（$off取消）      

beforeDestroy () {
     this.$root.eventHub.$off('事件名称')
  },

方法3.vuex的方式

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

1). 安装Vuex   npm install vuex --save

2).然后在src目录下创建store目录，建立一个adress.js文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    adress: ''
  },
  actions: {
    changeAdress (ctx,adress) {
      ctx.commit('changeAdress',adress)
    }
  },
  mutations: {
    changeAdress (state,adress) {
      state.adress = adress
    }
  }
})

3).在main.js中引入store  

4).赋值地址

this.$store.dispatch('changeAdress','这里是参数，选中后的地址')

直接通过dispatch触发adress.js中actions中的changeAdress方法并将新值传递过去.

5)接受参数

console.log('接受到的参数：'+this.$store.state.adress)

这样就能让两个页面之间进行数据传递.

通过vue事件发射与接收 和vuex的方式的传值方式，不仅可以实现页面之间的传值，也可实现非子父组件之间的传值。以上几种方法可以完成页面传值！如有疑问，请评论指出！

本篇独发金蝶云社区