vue-router是vue的官方路由管理器，它可以實現單頁面應用的頁面跳轉，讓用戶在URL發生變化時，可以不需要刷新頁面就能看到不同的界面。vue-router可以非常方便地定義路由參數，下面我們就來看一下如何在vue-router中定義和使用參數。

在vue-router中定義路由參數的方式非常簡單，只需要在路由的path屬性中加上占位符即可。占位符的格式為“:parameter”，其中“parameter”為參數名。例如，我們要定義一個帶有一個參數的路由，路徑為“/details/:id”，那么我們的代碼應該如下所示：

const router = new VueRouter({
routes: [
{
path: '/details/:id',
name: 'Details',
component: Details
}
]
})

定義了路由參數之后，我們需要在組件中取得該參數的值。我們可以使用$route對象來獲取。$route.params對象包含所有動態路由參數，如果沒有路由參數，則為空對象。例如，我們要在Details組件中獲取上面定義的“id”參數，我們可以使用$route.params.id來獲取。代碼如下所示：

export default {
name: 'Details',
created() {
console.log(this.$route.params.id) // 輸出路由參數id的值
}
}

如果我們需要在同一個路由對應的組件中，根據不同的參數來展示不同內容，有時候需要在同一個組件內監聽路由參數變化。vue-router提供了$route對象的watch功能，我們可以借助watch來監聽$route.params的變化。代碼如下所示：

export default {
name: 'Details',
watch: {
'$route.params': function(newParams, oldParams) {
console.log(newParams.id) // 輸出新的id參數值
console.log(oldParams.id) // 輸出舊的id參數值
}
}
}

有時候我們需要在組件中直接訪問路由參數，而不是使用$route對象獲取。vue-router也提供了該功能，我們可以通過props來將$route.params中的參數映射到組件的props中。代碼如下所示：

export default {
name: 'Details',
props: {
id: String
},
}

這樣我們在組件中就可以直接使用“this.id”來獲取$id參數的值，而不需要使用$route對象了。

總的來說，vue-router提供了非常方便地定義和使用路由參數的功能。我們可以通過占位符的方式來定義路由參數，然后使用$route對象、watch、props等方式來訪問和監聽路由參數的變化。這些功能讓我們在開發單頁面應用時，能夠更加方便地管理和展示頁面，提高了用戶體驗。