在Vue多頁面應用中，我們經常需要將一些參數傳遞給頁面，例如表單提交、導航等等。本文將詳細介紹在Vue多頁面應用中傳遞參數的各種方式。

URL參數

URL參數是一種簡單有效的傳遞參數的方式。通過在URL中添加參數，頁面可以直接獲取到這些參數并進行相應的操作。

// 傳遞參數進入頁面// 接收參數
var username = $route.query.username

localStorage

localStorage是一種瀏覽器提供的本地存儲方式。通過將參數保存到localStorage中，可以在不同的頁面之間傳遞參數。

// 存儲參數
localStorage.setItem('username', 'john')
// 獲取參數
var username = localStorage.getItem('username')

Vue Bus

Vue Bus是Vue官方提供的一種組件間通信方式。通過Vue Bus，可以在任意頁面之間傳遞參數。首先需要在main.js中創建Vue Bus：

// main.js
Vue.prototype.$bus = new Vue()
// 發送參數
this.$bus.$emit('username', 'john')
// 接收參數
this.$bus.$on('username', function (username) {
// do something
})

Vuex

Vuex是一種狀態管理方式。通過將參數保存到Vuex中，在整個應用中都可以訪問這些參數。

// store.js
export default new Vuex.Store({
state: {
username: 'john'
},
getters: {
getUsername: state =>{
return state.username
}
},
mutations: {
setUsername: (state, payload) =>{
state.username = payload.username
}
},
actions: {
setUsername: ({commit}, username) =>{
commit('setUsername', {username})
}
}
})
// 獲取參數
this.$store.getters.getUsername
// 設置參數
this.$store.dispatch('setUsername', 'john')

總結

不同的場景下，使用不同的方式來傳遞參數。URL參數適用于簡單的參數傳遞；localStorage適用于多個頁面之間的狀態保存；Vue Bus適用于任意頁面之間的通信；Vuex適用于對整個應用進行狀態管理。