Vue Router 動態路由匹配

動態路由匹配

帶參數的動態路由匹配

將給定匹配模式的路由(path:'/users/:id')映射到同一個組件(Component:User)。

路徑參數

例如有一個User組件，它應該對所有用戶進行渲染，但用戶ID不同，在Vue Router中，可以在路徑中使用一個動態段(以冒號開始)來實現，稱之為‘路徑參數’。

{
        path: '/users/:id',
        component: Users
}

當一個路由被匹配時，它的params值將在每個組件中以this.$route.params的形式暴露出來(HTML中則是$route.params)。而動態段的key和對應值將被映射到params上，通過this.$route.params.動態段key獲取。

響應路由參數的變化

當用戶從/users/johnny導航到/users/jolyne時，相同組件實例將被重復使用。兩個路由都渲染同個組件，復用則更加高效。但這也意味着組件的生命周期鈎子不會再被調用。

對同一組件參數的變化做出響應

可以用watch $route對象上的任意屬性：

created() {
    this.$watch(() => this.$route.params,
        (toParams, previousParams) => {
          //對路由變化做出響應
        })
  }

this.$watch(要監視的屬性，回調函數)

監視當前路由實例上的任意屬性，例如動態段的值發生變化時，會觸發回調函數，對路由的變化做出響應。

也可以使用beforeRouteUpdate導航守衛：

const User = {
  template: '...',
  async beforeRouteUpdate(to, from) {
    //對路由變化做出響應
  }
}

獲取params任意屬性對應的值：to.params.xxx

捕獲所有路由或404 Not found路由

常規參數只匹配url片段間的字符(即/xxx/中間的部分)。如果想匹配自定義路徑，可以在路徑參數后面的括號中加入正則表達式。

匹配任意路徑，可以使用通配符*：path:'*'，通常用於客戶端404錯誤。如果使用了History模式，請確保正確配置了服務器。

當使用通配符路由時，請確保路由順序正確，即含有通配符的路由應該放在最后。

當使用一個通配符時，$route.params內會自動添加一個名為patchMatch參數，它包含URL通過通配符被匹配的部分：

{
        path: '/user-*',
        name:'User',
        component:User
    }

上面例子中，若路徑為/user-admin，則this.$route.params.patchMatch=admin。

高級匹配模式

vue-router使用path-to-regexp作為路徑匹配引擎，所以支持很多高級的匹配模式，例如可選的動態路徑參數、匹配0個或多個(*)、1個或多個(+)，甚至是自定義正則匹配(例如：'/:username(^\\d)+')。

匹配優先級

有時候，同一路徑可以匹配多個路由。此時，匹配的優先級就按照路由的定義順序：誰先定義的，誰的優先級就最高。