vue-router との旅の簡単な歴史
Vue.js を使用するほぼすべての開発者は、現在 Vue-router を使用しているか、またはこれまで Vue-router のみを使用したことがあります。私を含め、多くの開発者は、おおむね満足しています。私が耳にする最大の不満は、厳密に型指定されたルートがないことです。これは通常、ルートを Typescript でラップすることで解決されます。
// router/routes.ts
import { RouteLocationRaw, RouteRecordRaw } from 'vue-router'
type RouteFunction = (...args: any()) => RouteLocationRaw
export const routes = {
home: () => ({ name: 'home' }) as const,
club: (clubId: string) => ({ name: 'clubs.view', params: { clubId } }) as const,
profile: (userId?: string) => ({ name: 'profile.view', query: { userId } }) as const,
} satisfies Record
それから routes が真実の源となるため、ナビゲーションでは常に routes 適切な名前を vue-router に送信します。
go to club
ルートを定義する構文は少し面倒ですが、正直言ってかなりうまく機能します。しかし、私は新しいプロジェクトを次々と立ち上げるタイプで、挑戦が大好きなので、Pleek91 とチームを組んで、独自のルートを構築できないか検討しました。
Kitbagルーターのご紹介
https://router.kitbag.dev
私たちは、プロジェクトをゼロから始めることを決定しました。他の多くの人のやり方を踏襲したり、比較的古い vue-router プロジェクトの上に構築しようとしたりするのではなく、第一原理から問題を解決することにしました。つまり、Kitbag Router は vue-router を使用するプロジェクトの代替品ではありません。したがって、この自由は、Vue-router との機能の同等性の必要性に縛られることなく、可能な限り最高の開発者エクスペリエンスを追求できることも意味します。
Kitbagの機能をいくつか見てみましょう
まず第一に、型安全です!
Kitbag Router は、名前、パス、クエリをすべて Route タイプに保存したルートを返す createRoutes ユーティリティを使用します。つまり、createRouter に指定したルートは、現在のルートにアクセスしたりナビゲーションを実行したりするときに型の安全性を維持します。
ルーティングにおける型安全性とは、割り当て時に自動補完が行われることを意味します beforeRouteEnter フック、そしてルートの期待パラメータが更新されずに変更された場合にTypescriptがエラーになることを保証します。 router.push() 電話。
パラメータははるかに強力です
Kitbag Routerは、特定のルートにどのようなパラメータが期待されるかを知っているだけでなく、 String。
Kitbag Routerには、typeStringのパラメータのサポートが組み込まれています。 Number、 Boolean、 Date、 RegExp、 JSON、および定義したカスタム パラメータ タイプも含まれます。
このタイプは、ナビゲーションに便利なだけでなく、 number 「id」パラメータの場合、URL で指定された値が数値制約を満たさない場合、一致とは見なされません。さらに、ルート用にレンダリングされる Vue コンポーネントは、パラメータが存在するかどうかを気にする必要はなく、文字列から想定される型に変換する必要もありません。
クエリのサポート
パラメータはパスだけに限定されません。Kitbag Router を使用すると、URL の他の部分でパラメータを定義するのと同じ方法で、クエリで必要なパラメータを設定できます。
拒否の処理
ルートを定義する際には、必然的に「catch-all」または「not found」ルートを追加したくなるでしょう。Kitbag Routerはパス/クエリで通常の正規表現の定義を完全にサポートしていますが、さらに優れた処理のサポートも備えています。 NotFoundこれを「拒否」と呼んでいますが、これはカスタマイズ可能で、必要に応じてカスタム拒否に拡張できます。たとえば、 NotAuthorized拒否がトリガーされると (通常はフックの 1 つから)、Kitbag Router は、指定された拒否タイプに割り当てられた拒否コンポーネントを自動的にレンダリングします。
もっと…
これらは、Kitbag Router を本当に魅力的なものにしている主な機能ですが、他にも多くの機能があります。Kitbag Router は Vue3 用に構築されており、非同期コンポーネント、ルート フック、useRoute からの編集可能なパラメーター、RouterLink および RouterView のコンポーネントなどをサポートしています。
準備はいい？
Kitbag Router はまだ非常に未熟で、現在は 2 人のチームによってメンテナンスされています。まだ安定したリリース (この記事を書いている時点では 0.2.0) がないため、状況は今後も変わる可能性があります。とはいえ、ぜひ試してみて、星を付けていただければと思います。次にどの機能に重点を置くべきかについて、コミュニティからの意見をお待ちしています。
エンジニアリングを楽しんでください！