在Vue Route中，我們可以通過獲取頁面組件的Data來傳遞參數(shù)以及修改數(shù)據(jù)。Route是Vue Router中的一個核心概念，可以通過Route獲取URL中攜帶的參數(shù)，進(jìn)而將其注入到Vue組件的Data中。下面將詳細(xì)介紹Vue Route獲取Data的方法。

//引入Vue及相關(guān)庫
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//定義組件
const User = {
data () {
return {
//數(shù)據(jù)
}
},
methods: {
//方法
},
computed: {
//計算屬性
},
template: ``
}
//定義路由
const routes = [
{
path: '/user/:userId',
component: User
}
]
//創(chuàng)建router實例
const router = new VueRouter({
routes
})
//vue實例
const app = new Vue({
router
}).$mount('#app')

在上述代碼中，我們定義了一個名為“User”的組件。該組件中包含Data、Methods、computed以及template四個屬性，其中最關(guān)鍵的即Data屬性。我們需要將URL中攜帶的參數(shù)通過Route獲取，并注入到Data中。在這里定義了path為"/user/:userId"的路由，即我們可以通過/user/123的URL訪問到該組件，并將123這個參數(shù)注入到Data中。

//定義組件
const User = {
data () {
return {
message: '',
userId: ''
}
},
methods: {
getMessage () {
axios.get(`/user/${this.userId}/message`)
.then(response =>{
this.message = response.data
})
.catch(error =>{
console.log(error)
})
}
},
computed: {
//計算屬性
},
mounted () {
this.userId = this.$route.params.userId
this.getMessage();
},
template: ``
}

在上面的組件代碼中，我們將userId和message兩個數(shù)據(jù)注入到Data中，并定義了一個getMessage方法，通過axios獲取數(shù)據(jù)后將其賦值給message。在Mounted鉤子函數(shù)中，我們通過this.$route.params.userId獲取Route中的參數(shù)，并將其賦值給組件中的數(shù)據(jù)，進(jìn)而實現(xiàn)了URL參數(shù)動態(tài)傳遞數(shù)據(jù)的功能。在mounted中我們還調(diào)用了getMessage方法，將數(shù)據(jù)渲染到頁面上。

這樣我們就可以通過Vue Route獲取到URL中攜帶的參數(shù)，并將數(shù)據(jù)注入到組件的Data中了。Route除了動態(tài)傳遞參數(shù)之外，還可以通過query傳遞參數(shù)，這是基于URL查詢參數(shù)的傳遞方式。此外，還可以通過props傳遞參數(shù)，但需要特殊配置。如需了解更多信息，可以參考Vue Router官方文檔。