在 Vue 中，當我們通過路由切換頁面時，經常需要獲取 URL 中的一些參數來進行一些操作，比如獲取某個用戶的 ID、某個帖子的 ID 或者某個商品的 SKU 等。這時候我們就需要通過 Vue Router 提供的一些方法來獲取到這些路由參數。

首先我們需要知道，在路由參數中獲取到的參數都是字符串類型的，如果我們需要使用他們做一些計算或者比較等操作，就需要先進行數據類型轉換。

// 將字符串類型的參數轉成數字類型
let id = parseInt(this.$route.params.id)

那么，如何獲取路由參數呢？我們可以通過this.$route.params.name的形式來獲取路由參數，其中name就是路由參數的名稱。我們也可以在路由配置中設置參數名：

const router = new VueRouter({
routes: [
{
path: '/user/:userId',
component: User,
props: true
}
]
})

這樣，我們就可以在組件中使用props: ['userId']來接收路由參數了。這里需要注意，當設置了props: true后，路由參數會以props的形式注入到當前組件中。這樣我們就可以在模板中直接使用接收到的參數來渲染數據了。

// 路由配置
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
component: User,
props: true
}
]
})
// User 組件

如果我們需要在代碼中獲取到路由參數，我們可以通過以下方式來進行獲取：

// 在組件內獲取
console.log(this.$route.params.userId)
// 在路由鉤子函數中獲取
beforeRouteEnter (to, from, next) {
console.log(to.params.userId)
next()
}

如果我們需要在路由切換時，對組件進行重新渲染，我們可以通過watch監聽路由參數變化，然后再觸發重新渲染。

當然，我們也可以通過在路由控制器中為每個路由參數設置默認值或者給定默認的路徑，以便我們遇到無效路由或者路由參數時能夠做出更好的處理。

const router = new VueRouter({
routes: [
{
path: '/user/:userId', // 必須的路由參數
component: User,
props: true,
children: [
{
path: 'activity/:activityId?', // 可選的路由參數
component: UserActivity,
props: (route) =>({ userId: route.params.userId, activityId: route.params.activityId || 'default-activity-id' })
}
]
}
]
})

總的來說，我們可以通過以上方法來獲取路由參數，同時也可以通過設置默認值或者默認路徑來避免遇到異常情況時無法處理，這樣我們就能夠更好地控制路由，從而更好地構造自己的應用程序。