MPA(マルチ・ページ・アプリケーション)でuseRouteを利用したくて、Vue Router のuseRouteライクなuseRouteを実装してみたので、紹介します。
初期実装
ブラウザからページのURLを取得し、正規表現を利用する等して、分解していました。
実装として綺麗ではなく、汎用性も低いので、コードは載せません。
Nano Stores + Nano Stores Router + Nano Stores Vue を利用した実装
Nano Stores
コンパクト(軽量)かつUIフレームワーク・ライブラリ非依存(Vue.js3/Vanila JS etcで利用可能)な状態管理ライブラリ
Nano Stores Router
Nano Stores用のルーティング・ライブラリ
Nano Stores Vue
Vue.jsからNano Store を利用しやくするためのライブラリ。
本題：ルータ部分
Nano Stores Router で実装。
import { createRouter } from '@nanostores/router'
export const $router = createRouter(
{ frame: '/frames/:id' },
{ links: false }
)
Nano Stores Routerは(デフォルトで)リンク(aタグ)をトラッキングし画面遷移をNano Stores Routerでコントロールできるようにしていますが、MPAではこの挙動は不要なので、{ links: false } を設定して、リンクのトラッキングをオフにしています。
本題：useRoute 実装
import { $router } from './router.ts'
import { useStore } from '@nanostores/vue'
export function useRoute() {
const router = useStore($router)
const params = router.value?.params
const query = router.value?.search
const path = router.value?.path
return { params, query, path }
}
利用例
import { useRoute } from './use-route.ts'
const route = useRoute()
const id: string = route.params?.id ?? ''
const refStr: string = route.query?.ref ?? ''
最後に
Nano Stores はPiniaほど、Nano Stores RouterもVue Router ほど、多機能ではありませんが、コンパクト(軽量)なので、使いどころは多々？あるのではないか思います。
Nano Stores、調べてみては如何でしょうか？
PS: このuseRouteは自作Railsアプリ(レガシー版)のために実装しました。
Discussion