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>
```