Vue Router 路由的匹配語法

路由的匹配語法

除了/about這樣的靜態路由，還有/users/:userId這樣的動態路由，Vue Router還可以提供更多方式。

在參數中自定義正則

像:userId這樣的參數，內部使用([^/]+)來從URL中提取參數。其中 ^ 非、[] 某個字符規則、+ 等價於{1,} 至少出現一次。

區分兩個能匹配完全相同URL的路由

/:orderId和/:productName這兩個路由會匹配完全相同的URL，如何區分？

1.在路徑中添加一個靜態部分

{
      path: '/o/:orderId'
},
{
      path: '/p/:productName'
}

2.關注兩個動態段需要的參數類型

例如orderId總是一個數字，而productName可以是任何東西，所以在括號中為參數指定一個自定義的正則

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

\\d：\轉義，表示數字

可重復的參數

*：匹配0個或多個

例如'/:chapters*'將匹配：/、/one、/one/two等等

+：匹配1個或多個

例如'/:chapters+'將匹配：/one、/one/two、/one/two/three等等

而將參數標記為可重復后(*或+)，將為你提供一個參數數組，而不是一個字符串，且在使用明明路由時也需要你傳遞一個數組。

this.$router.push({
        name: 'chapters',
        params: {chapters: ['one', 'two']}
})

這樣匹配的路由路徑為：/one/two

如果路由路徑正則為'/:chapters+'，而傳遞的數組為[]，則會拋出錯誤，因為至少需要一個params。

可選參數

？：匹配0個或1個

例如'/users/:userId?'將匹配/users、/users/posva

*在技術上也標志着一個參數是可選的，但？參數不能重復，最多1個。