Vue Routerの動的パラメータのバリデーションとか加工とか

公式ドキュメントにちゃんと書いてあるけど、自分が検索に時間かかるのでメモ。

バージョンは2020年6月時点でvue-router@3.0+, vue@2.5+あたりのものなので、古くなっていたら注意。

動的パラメータに正規表現を使う

path-to-regexpを使っているから色々と正規表現が使えるよとのこと。 router.vuejs.org

path-to-regexpのページ。 github.com

Vue Routerによる使用例。 github.com

よくあるのが数字だけ受け付けたいとき。

entry/:id(\\+d)

任意パラメータのときは正規表現の後ろに?をくっつける。

entry/:id(\\+d)?

動的パラメータを加工してコンポーネントに渡す

ルートコンポーネントにプロパティを渡す方法。 router.vuejs.org

例にもあるけど年月日あたりをいじってコンポーネントに渡すのに便利。 github.com

あとは数字のパラメータをNumberにキャストしてからコンポーネントに渡すとか。

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: (route) => ({ id: Number(route.params.id) }) }
  ]
})

以上。ねむい。