歡迎觀看《Vue Router 實戰（第4版）》視頻課程

1. 1. 路由的匹配語法

大多數應用都會使用 /about 這樣的靜態路由和 /users/:userId 這樣的動態路由，就像我們剛才在動態路由匹配中看到的那樣，但是 Vue Router 可以提供更多的方式！

TIP

為了簡單起見，所有的路由都省略了 component 屬性，只關注 path 值。

1. 1. 1. 在參數中自定義正則

當定義像 :userId 這樣的參數時，我們內部使用以下的正則 ([^/]+) (至少一個不是斜杠 / 的字符)來從 URL 中提取參數。這很好用，除非你需要根據參數的內容來區分兩個路由。想象一下，兩個路由 /:orderId 和 /:productName，兩者會匹配完全相同的 URL，所以我們需要一種方法來區分它們。最簡單的方法就是在路徑中添加一個靜態部分來區分它們：

const routes = [

??// 匹配 /o/3549

??{ path: '/o/:orderId' },

??// 匹配 /p/books

??{ path: '/p/:productName' },

]

但在某些情況下，我們并不想添加靜態的 /o /p 部分。由于，orderId 總是一個數字，而 productName 可以是任何東西，所以我們可以在括號中為參數指定一個自定義的正則：

const routes = [

??// /:orderId -> 僅匹配數字

??{ path: '/:orderId(\\d+)' },

??// /:productName -> 匹配其他任何內容

??{ path: '/:productName' },

]

現在，轉到 /25 將匹配 /:orderId，其他情況將會匹配 /:productName。routes 數組的順序并不重要!

TIP

確保轉義反斜杠( \ )，就像我們對 \d (變成\\d)所做的那樣，在 JavaScript 中實際傳遞字符串中的反斜杠字符。

1. 1. 1. 可重復的參數

如果你需要匹配具有多個部分的路由，如 /first/second/third，你應該用 *（0 個或多個）和 +（1 個或多個）將參數標記為可重復：

const routes = [

??// /:chapters -> ?匹配 /one, /one/two, /one/two/three, 等

??{ path: '/:chapters+' },

??// /:chapters -> 匹配 /, /one, /one/two, /one/two/three, 等

??{ path: '/:chapters*' },

]

這將為你提供一個參數數組，而不是一個字符串，并且在使用命名路由時也需要你傳遞一個數組：

// 給定 { path: '/:chapters*', name: 'chapters' },

router.resolve({ name: 'chapters', params: { chapters: [] } }).href

// 產生 /

router.resolve({ name: 'chapters', params: { chapters: ['a', 'b'] } }).href

// 產生 /a/b

// 給定 { path: '/:chapters+', name: 'chapters' },

router.resolve({ name: 'chapters', params: { chapters: [] } }).href

// 拋出錯誤，因為 `chapters` 為空

這些也可以通過在右括號后添加它們與自定義正則結合使用：

const routes = [

??// 僅匹配數字

??// 匹配 /1, /1/2, 等

??{ path: '/:chapters(\\d+)+' },

??// 匹配 /, /1, /1/2, 等

??{ path: '/:chapters(\\d+)*' },

]

1. 1. 1. Sensitive 與 strict 路由配置

默認情況下，所有路由是不區分大小寫的，并且能匹配帶有或不帶有尾部斜線的路由。例如，路由 /users 將匹配 /users、/users/、甚至 /Users/。這種行為可以通過 strict 和 sensitive 選項來修改，它們既可以應用在整個全局路由上，又可以應用于當前路由上：

const router = createRouter({

??history: createWebHistory(),

??routes: [

????// 將匹配 /users/posva 而非：

????// - /users/posva/ 當 strict: true

????// - /Users/posva 當 sensitive: true

????{ path: '/users/:id', sensitive: true },

????// 將匹配 /users, /Users, 以及 /users/42 而非 /users/ 或 /users/42/

????{ path: '/users/:id?' },

??],

??strict: true, // applies to all routes

})

1. 1. 1. 可選參數

你也可以通過使用 ? 修飾符(0 個或 1 個)將一個參數標記為可選：

const routes = [

??// 匹配 /users 和 /users/posva

??{ path: '/users/:userId?' },

??// 匹配 /users 和 /users/42

??{ path: '/users/:userId(\\d+)?' },

]

請注意，* 在技術上也標志著一個參數是可選的，但 ? 參數不能重復。

1. 1. 1. 調試

如果你需要探究你的路由是如何轉化為正則的，以了解為什么一個路由沒有被匹配，或者，報告一個 bug，你可以使用路徑排名工具。它支持通過 URL 分享你的路由。