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=privaterouter.push({ path: 'register', query: { plan: 'private' }})
path:'name'和path:'/name'的区别
//比如当前路径是homethis.$router.push({path:'name'})//==>path为/home/namethis.$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.$mit('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.$mit('changeFromChildInfo', 'I am your child.')},toBrother () {this.$mit('changeFromBrotherInfo', 'I am your brother.')}}}</script>
兄弟组件 BrotherComponent 代码：
<template><div>{{fromBrotherInfo}}</div></template><script>export default {computed: {fromBrotherInfo () {return this.$store.state.fromBrotherInfo}}}</script>
