# 路由規則和路由匹配 Vue-router 做路徑匹配時支持動態片段、全匹配片段以及查詢參數（片段指的是 URL 中的一部分）。對于解析過的路由，這些信息都可以通過**路由上下文對象**（從現在起，我們會稱其為路由對象）訪問。 在使用了 vue-router 的應用中，路由對象會被注入每個組件中，賦值為 `this.$route` ，并且當路由切換時，路由對象會被更新。 路由對象暴露了以下屬性： - **$route.path** 字符串，等于當前路由對象的路徑，會被解析為絕對路徑，如 `"/foo/bar"` 。 - **$route.params** 對象，包含路由中的動態片段和全匹配片段的鍵值對，詳情見后文 - **$route.query** 對象，包含路由中查詢參數的鍵值對。例如，對于 `/foo?user=1` ，會得到 `$route.query.user == 1` 。 - **$route.router** 路由規則所屬的路由器（以及其所屬的組件）。 - **$route.matched** 數組，包含當前匹配的路徑中所包含的所有片段所對應的配置參數對象。 - **$route.name** 當前路徑的名字。 (參見[具名路徑](./named.md)) ### 自定義字段 除了以上這些內置的屬性外，在路由設置對象中的其他自定義字段也會被拷貝到最終的路由對象上。例如： ``` js router.map({ '/a': { component: { ... }, auth: true // 這里 auth 是一個自定義字段 } }) ``` 當 `/a` 被匹配時，`$route.auth` 的值將會是 `true`。我們可以利用這個特性在全局的鉤子函數中進行身份驗證： ``` js router.beforeEach(function (transition) { if (transition.to.auth) { // 對用戶身份進行驗證... } }) ``` 當嵌套的路徑被匹配時，每一個路徑段的自定義字段都會被拷貝到同一個路由對象上。如果一個子路徑和一個父路徑有相同的字段，則子路徑的值會覆蓋父路徑的值。 ### 在模板中使用 你可以直接在組件模板中使用 `$route` 。例如： ``` html <div> <p>當前路徑: {{$route.path}}</p> <p>當前路由參數: {{$route.params | json}}</p> </div> ``` ### 路由匹配 #### 動態片段 動態片段使用以冒號開頭的路徑片段定義，例如 `user/:username` 中，`:username` 就是動態片段。它會匹配注入 `/user/foo` 或者 `/user/bar` 之類的路徑。當路徑匹配一個含有動態片段的路由規則時，動態片段的信息可以從 `$route.params` 中獲得。 使用示例： ``` js router.map({ '/user/:username': { component: { template: '<p>用戶名是{{$route.params.username}}</p>' } } }) ``` 一條路徑中可以包含多個動態片段，每個片段都會被解析成 `$route.params` 的一個鍵值對。 例子: | 模式 | 匹配的路徑 | $route.params | |---------|------|--------| | /user/:username | /user/evan | `{ username: 'evan' }` | | /user/:username/post/:post_id | /user/evan/post/123 | `{ username: 'evan', post_id: 123 }` | #### 全匹配片段 動態片段只能匹配路徑中的一個部分，而全匹配片段則基本類似于它的貪心版。例如 `/foo/*bar` 會匹配任何以 `/foo/` 開頭的路徑。匹配的部分也會被解析為 `$route.params` 中的一個鍵值對。 例如: | 模式 | 匹配的路徑 | $route.params | |---------|------|--------| | /user/*any | /user/a/b/c | `{ any: 'a/b/c' }` | | /foo/*any/bar | /foo/a/b/bar | `{ any: 'a/b' }` |