在Vue中，我們經常需要獲取URL參數傳遞給組件進行使用。在前端，獲取URL參數最常用的方法是使用location.search屬性。location.search會返回URL的查詢字符串，包括問號(?)以及問號后面的內容。Vue提供了一種更方便的方法——$route.query。

在使用$route.query之前，我們需要先確認我們的組件中確實有$route對象?？梢酝ㄟ^在組件中引入import {mapState} from 'vuex'以及computed中使用mapState(['$route'])獲取$route對象。

import {mapState} from 'vuex'
export default {
computed: {
...mapState(['$route']) // 通過mapState引入$route對象
},
mounted() {
console.log(this.$route) // 測試是否引入成功
}
}

引入$route對象后，我們可以直接在組件中使用$route.query獲取URL參數。

export default {
computed: {
...mapState(['$route'])
},
mounted() {
console.log(this.$route.query) // 獲取URL的查詢參數
}
}

如果URL參數中包含中文或特殊字符，可以通過decodeURIComponent()方法進行編碼。

const name = decodeURIComponent(this.$route.query.name)
console.log(name)

同時，如果URL參數中包含多個參數，可以使用&連接。

http://example.com/?name=Lucy&age=20

在Vue組件中使用$route.query獲取URL參數，可以實現URL與組件的數據傳遞。這種方式比手動獲取URL參數更加方便和靈活。