this.$route 和 this.$router区别：
this.$route 信息参数（query、prams）传参获取
this.$router 功能函数，go()，push()等方法调用
1. 路由传值
```
页面1
<router-link :to="{path:'Login', params:{name:'Lily', age: 18},query:{sex:'女'}, props: true}">
查看详细信息
</router-link>
```
2. vuex传值
```
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 定义状态属性
var state = {
count: 6
}
// 定义getters
var getters = {
count (state) {
return state.count
},
isEvenOrOdd (state) {
return state.count % 2 === 0 ? '偶数' : '奇数'
}
}
// 定义Actions，要执行的操作，如流程判断，异步请求等
const actions = {
// 可以自定义名字
increment ({ commit, state }) {
commit('increment') // 提交一个变化名称，与increment(state)对应
// 也可以传参数
// commit('increment'， {data：state})
},
decrement ({ commit, state }) {
if (state.count > 5) {
commit('decrement')
}
}
}
// 定义mutations,改变数据状态
const mutations = {
// 这里也可以接受参数，上面传入的
increment(state, data) {
state.count++
},
decrement(state, data) {
state.count--
}
}
// 创建store对象
const store = new Vuex.Store({
state,
getters,
actions,
mutations
})
// 导出store对象
export default store
```
组件页面
```
<template>
<div>
<button @click="clickBtn">我是可点击的按钮</button>
<button @click="increment">增加</button>
<button @click="decrement">减小</button>
<p>当前数字：{{count}},{{isEvenOrOdd}}</p>
<span @click="getData($event,'21')">55</span>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'myView',
props: {
msg: String
},
methods: {
increment () {
// vue建议使用这种方式调用store actions中的方法
this.$store.dispatch('increment')
},
decrement () {
// vue建议使用这种方式调用store的方法
this.$store.dispatch('decrement')
}
},
computed: mapGetters(['count', 'isEvenOrOdd'])
}
</script>
```
