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

Vue Router官方API：

Vue Router官方API ：https://router.vuejs.org/zh/api/

一、路由传值：

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-view的地方


首页

编程式：（如提供了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：

 子组件 ChildComponent ：

兄弟组件 BrotherComponent ：

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

父组件 FatherComponent 代码：

子组件 ChildComponent 代码：

兄弟组件 BrotherComponent 代码：

三、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: '',
  components: { App }
})

父组件 FatherComponent 代码：

子组件 ChildComponent 代码：

兄弟组件 BrotherComponent 代码：