Vue路由传值，父子组件传值，组件间传值，Vuex传值

Vue Router官方API：

Vue Router官方API ：API 参考 | Vue Router

一、路由传值：

1、通过路由的路径带参数（url中显示参数），同时配置路由的时候也要带上参数，获取参数使用this.$route.params.id，直接拿路由里面的参数。

toRouter（）{
    var id = 1;
    var type = 2;
    this.$router.push({
        //path:"/路径名/"+ 参数1 + "/" + 参数2,
        path:"/content/"+ id +"/"+ type
    });
}

router.js需配置

{
    path:"index/:id",
    name:"index",
    component: Index
}

//传多个参数
{
    path:"index/:id1/:id2",
    name:"index",
    component: Index
}

//相同路由有参数和无参数(需把有参数的放在无参数的前面)
{
    path:"index/:id",
    name:"index",
    component: Index
},
{
    path:"index",
    name:"index",
    component: Index
}

2、不用在router.js路由页配置参数来接收（url中不显示参数，刷新页面会丢失传递过来的参数），而是通过name或者path去跳转（name和path写法一样，区分name和path）。

//通过name跳转
toRouter(){
    this.$router.push({
        name:"content",
        params:{
            content:this.content,//指定值或者获取的值
            page:"1", //其他需要传递的参数
        }
    })
}

//通过path跳转
toRouter(){
    this.$router.push({
        path:"/content",
        params:{
            content:this.content,//指定值或者获取的值
            page:"1", //其他需要传递的参数
        }
    })
}

目标接收组件，例如：content.vue

created(){
    this.getRouter();
}
methods:{
    getRouter(){
        this.content = this.$route.params.content;
        this.page = this.$route.params.page;
    }
}

扩展：

$router和$route的区别

Vue Router对$router和$route的解释：

$router是router构造方法全局路由的实例。当导航到不同url，可以使用this.$router.push方法，这个方法则会向history里面添加一条记录，当点击浏览器回退按钮或者this.$router.back()就会回退之前的url。

$route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。如path，name等。

路由跳转分为编程式和声明式

声明式：

//路由入口
<router-link :to="路由地址">
//视图出口 在一个页面嵌套子路由，并且不跳转页面，子页面就会渲染在router-view的地方
<router-view></router-view>

<router-link to="/index">首页</router-link>

// 字符串
<router-link to="millia"> to millia</router-link>
// 对象
<router-link :to="{path:'millia'}"> to millia</router-link>
// 命名路由
<router-link :to="{name: 'milliaPath'}"> to millia</router-link>

//直接路由带查询参数query，地址栏变成 /milliaPath?color=red
<router-link :to="{path: 'milliaPath', query: {color: 'red' }}"> to millia</router-link>

// 命名路由带查询参数query，地址栏变成/milliaName?color=red
<router-link :to="{name: 'milliaName', query: {color: 'red' }}"> to millia</router-link>

//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
<router-link :to="{path: 'milliaPath', params: { color: 'red' }}"> to millia</router-link>

// 命名路由带路由参数params，地址栏是/milliaName/red
<router-link :to="{name: 'milliaName', params: { color: 'red' }}"> to millia</router-link>

编程式：（如提供了path，那么params和query的配置就会被忽略）

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

path:'name'和path:'/name'的区别

//比如当前路径是home
this.$router.push({path:'name'})//==>path为/home/name
this.$router.push({path:'/name'})//==>path为/name

二、组件传值：

1、兄弟组件传值（独立的事件中心Bus，兄弟组件需要有一个共同的父组件）：

方法一：创建Bus.js（需要在兄弟组件中引入）

import Vue from 'vue'
export default new Vue()

方法二：在main.js里添加（不需要在组件中引入）

Vue.prototype.Bus = new Vue();

父组件 FatherComponent：

<template>
  <div class="app">
    <ChildComponent />
    <BrotherComponent />
  </div>
</template>

<script>
import ChildComponent from './Child-component'
import BrotherComponent from './Brother-component'
export default {
  name: 'FatherComponent',
  components: {
    ChildComponent,BrotherComponent
  }
}
</script>

 子组件 ChildComponent ：

<template>
    <div class="">
        <button @click="PostValue">点击传值</button>
    </div>
</template>
<script>
import Bus from './Bus.js'
export default {
    name: 'A',
    data () {
        return {
            msga:"我是ChildComponent传过来的第一个内容",
            msgb:"我是ChildComponent传过来的第二个内容",               
        }
    },
    methods:{
        PostValue(){
            let data = {
                msga:this.msga,
                msgb:this.msgb,
            }
            Bus.$emit("myFun",data);
            //main.js创建独立的事件中心
            //this.Bus.$emit("myFun",data);
        }
    }
}
</script>

兄弟组件 BrotherComponent ：

<template>
    <div class="">
        <div>接收到的内容1:{{this.texta}}</div>
        <div>接收到的内容2:{{this.textb}}</div>
    </div>
</template>
<script>
import Bus from './Bus.js'
export default {
    name: 'BrotherComponent',
    data () {
        return {
            texta:"接收内容1",
            textb:"接收内容2",
        }
    },
    created(){
        Bus.$on("myFun",this.GetData);

        //通过方法获取值
        //this.getAData();

        //mian.js创建独立的事件中心
        //this.Bus.$on("myFun", message => {
        //this.texta= message.msga;
        //this.textb= message.msgb;
        //});
    },
    // 最好在组件销毁前 清除事件监听
    beforeDestroy: function () {
        Bus.$off("myFun", this.PostValue);
        //main.js创建独立的事件中心
        //this.Bus.$off("myFun", this.PostValue);
    },
    methods:{
        GetData(val){
            console.log(val);
            this.texta = val.msga;
            this.textb = val.msgb;
        }

        //通过方法获取值
        //getAData(){
        //    var that = this;
        //    Bus.$on("myFun",(message) => {
        //        console.log(message);
        //        that.texta = message.msga;
        //        that.textb = message.msgb;
        //    });
        //}
    }
}
</script>

2、父子组件传值（props、$emit）

父组件 FatherComponent 代码：

<template>
  <div>
    <div>{{toFatherInfo}}</div>
    <ChildComponent :toChildInfo="toChildInfo" @toFather="toFather" @toBrother="toBrother"/>
    <BrotherComponent :toBrotherInfo="toBrotherInfo"/>
    <button @click="toChild">传递给子组件</button>
  </div>
</template>

<script>
  import ChildComponent from './child-component'
  import BrotherComponent from './brother-component'

  export default {
    components: {
      ChildComponent,BrotherComponent
    },
    data () {
      return {
        toFatherInfo:"",
        toChildInfo:"",
        toBrotherInfo:""
      }
    },
    methods: {
      toFather (res) {
        this.toFatherInfo = res
      },
      toBrother (res) {
        this.toBrotherInfo = res
      },
      toChild () {
        this.toChildInfo = 'I am your father.'
      }
    }
  }
</script>

子组件 ChildComponent 代码：

<template>
  <div>
    <div>{{toChildInfo}}</div>
    <button @click="toFather">传递给父组件</button>
    <button @click="toBrother">传递给兄弟组件</button>
  </div>
</template>

<script>
  export default {
    props: {
      toChildInfo: {
        type: String
      }
    },
    methods: {
      toFather () {
        this.$emit('toFather', 'I am your child.')
      },
      toBrother () {
        this.$emit('toBrother', 'I am your brother.')
      }
    }
  }
</script>

兄弟组件 BrotherComponent 代码：

<template>
  <div>{{toBrotherInfo}}</div>
</template>

<script>
  export default {
    props: {
      toBrotherInfo: {
        type: String
      }
    }
  }
</script>

三、Vuex传值：

创建 store.js 来存放数据：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    fromFatherInfo: '',
    fromChildInfo: '',
    fromBrotherInfo: ''
  },
  mutations: {
    changeFromFatherInfo (state, fromFatherInfo) {
      state.fromFatherInfo = fromFatherInfo
    },
    changeFromChildInfo (state, fromChildInfo) {
      state.fromChildInfo = fromChildInfo
    },
    changeFromBrotherInfo (state, fromBrotherInfo) {
      state.fromBrotherInfo = fromBrotherInfo
    }
  }
})

main.js实例化：

import Vue from 'vue'
import App from './App'
import store from './store'

new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App }
})

父组件 FatherComponent 代码：

<template>
  <div>
    <div>{{fromChildInfo}}</div>
    <ChildComponent />
    <BrotherComponent />
    <button @click="toChild">传递给子组件</button>
  </div>
</template>

<script>
  import ChildComponent from './child-component'
  import BrotherComponent from './brother-component'

  export default {
    components: {
      ChildComponent,
      BrotherComponent
    },
    computed: {
      fromChildInfo () {
        return this.$store.state.fromChildInfo
      }
    },
    methods: {
      toChild () {
        this.$store.commit('changeFromFatherInfo', 'I am your father.')
      }
    }
  }
</script>

子组件 ChildComponent 代码：

<template>
  <div>
    <div>{{fromFatherInfo}}</div>
    <button @click="toFather">传递给父组件</button>
    <button @click="toBrother">传递给兄弟组件</button>
  </div>
</template>

<script>
  export default {
    computed: {
      fromFatherInfo () {
        return this.$store.state.fromFatherInfo
      }
    },
    methods: {
      toFather () {
        this.$store.commit('changeFromChildInfo', 'I am your child.')
      },
      toBrother () {
        this.$store.commit('changeFromBrotherInfo', 'I am your brother.')
      }
    }
  }
</script>

兄弟组件 BrotherComponent 代码：

<template>
  <div>{{fromBrotherInfo}}</div>
</template>

<script>
  export default {
    computed: {
      fromBrotherInfo () {
        return this.$store.state.fromBrotherInfo
      }
    }
  }
</script>