在Vue應用中，涉及到路由頁面時，我們可能需要截取URL中的參數并使用它們。截取路由中的參數很簡單，只需要使用Vue Router提供的$route.params對象即可訪問參數。在獲取參數后，我們可以將它們存儲在組件的data選項中以供后續使用。

//在路由配置中添加參數
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User
}
]
})
//訪問參數
const User = {
template: '
{{ $route.params.id }}
'
}

當訪問/user/123時，$route.params.id將返回123。

如果一個路由包含多個參數，我們可以使用一個對象來訪問它們。對象的鍵對應每個參數名稱的字符串，值對應參數值。

const router = new VueRouter({
routes: [
{
path: '/user/:id/:username',
component: User
}
]
})
const User = {
template: '
{{ $route.params.id }} - {{ $route.params.username }}
'
}

當訪問/user/123/john時，$route.params將返回{ id: '123', username: 'john' }。

除了$route.params外，我們還可以使用$route.query來獲取查詢參數。查詢參數是在URL中的鍵值對，通常用于過濾和搜索結果。在查詢參數中，每個鍵名對應URL中的查詢參數名稱，值對應URL中的查詢參數值。

//訪問/user?id=123&name=john
const User = {
template: '
{{ $route.query.id }} - {{ $route.query.name }}
'
}

當訪問/user?id=123&name=john時，$route.query將返回{ id: '123', name: 'john' }。

我們還可以使用$route.fullPath獲取包含查詢參數和哈希值的完整URL。

const User = {
template: '
{{ $route.fullPath }}
'
}

當訪問/user?id=123#about時，$route.fullPath將返回/user?id=123#about。

在獲取URL參數后，我們還可以在Vue組件中對它們進行操作。我們可以使用計算屬性或觀察器來監聽參數的變化并更新組件數據和方法。

const User = {
data() {
return {
userId: this.$route.params.id
}
},
watch: {
'$route.params.id'(newVal) {
this.userId = newVal
}
}
}

在上面的例子中，我們使用一個數據屬性userId來存儲$route.params.id的值。然后，我們使用watch來監聽$route.params.id的變化并更新userId的值。

總之，通過使用$route.params和$route.query，我們可以輕松地截取URL參數并將它們存儲在Vue組件中。這使得我們能夠在Vue應用中方便地使用URL參數，以便更輕松地構建動態和有用的頁面。