在Vue中，路由器($router)是一個非常重要的概念。路由器不僅負責管理應(yīng)用程序的路由規(guī)則，還可以傳遞參數(shù)。傳遞參數(shù)的方法有兩種，一種是通過路由參數(shù)傳遞，另一種是通過查詢參數(shù)傳遞。

當您需要通過路由參數(shù)傳遞參數(shù)時，使用$route.params可以在組件中獲取。例如，如果我們有一個名為“User”的路由規(guī)則，如下所示：

{
path: '/user/:id',
name: 'user',
component: User
}

通過$route.params.id，我們可以在組件中獲取id參數(shù)值。例如：

<template>
<div>
<h1>用戶：{{ $route.params.id }}</h1>
</div>
</template>
<script>
export default {
name: 'User',
data () {
return {
id: this.$route.params.id
}
}
}
</script>

在上面的示例中，我們定義了一個名為id的變量，該變量通過$this.$route.params.id設(shè)置為路由器中傳遞的id參數(shù)值。然后在模板中使用$router.params.id輸出用戶ID。

另一種傳遞參數(shù)的方式是使用查詢參數(shù)。可以在組件中使用$router.query獲取它們。例如，如果我們要向查詢參數(shù)傳遞參數(shù)，則可以使用以下路由規(guī)則：

{
path: '/search',
name: 'Search',
component: Search
}

我們可以在URL中添加查詢參數(shù)，如下所示：

/search?q=vue&sort=price

然后，我們可以使用$router.query訪問這些參數(shù)。例如：

<template>
<div>
<h1>搜索結(jié)果</h1>
<p>查詢詞：{{ $router.query.q }}</p>
<p>排序方式：{{ $router.query.sort }}</p>
</div>
</template>
<script>
export default {
name: 'Search',
data () {
return {
query: this.$router.query
}
}
}
</script>

在上面的示例中，我們可以通過$this.$router.query.q和$this.$router.query.sort獲得查詢參數(shù)，然后在模板中輸出它們。

查詢參數(shù)也可以作為路由參數(shù)的替代品。查詢參數(shù)的一個優(yōu)點是它們通常更容易理解，因為它們不必與路由規(guī)則的路徑參數(shù)匹配。通過使用查詢參數(shù)，您可以更靈活地處理路由器傳遞的數(shù)據(jù)。