ルーティング

ルートは各アプリではなく特性パッケージが管理します。アプリケーションシェルが各特性の routes エクスポートを 1 つのルーターインスタンスに合成します。

1. ルーターインスタンス

@vh5/app-shell がルーターを一元作成します。アダプターアプリはルートを設定しません。

const featureRoutes = mergeRouteModules([...homeRoutes, ...productRoutes, ...userRoutes]);

export const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path: "/", component: BasicLayout, redirect: "/home", children: featureRoutes },
    ...authRoutes,
    { path: "/:pathMatch(.*)*", component: () => import("../views/NotFound.vue") },
  ],
});

2. 特性ルートモジュール

export const productRoutes: RouteRecordRaw[] = [
  {
    path: "product",
    name: "product-list",
    component: () => import("./views/List.vue"),
    meta: { title: "商品一覧", authority: ["user", "admin"], tab: true },
  },
];

meta フィールドの説明：

フィールド	型	説明
title	string	ドキュメントタイトル + ナビバータイトル
authority	string[]	アクセス可能なロール（省略 ⇒ 認証済みであれば可）
public	boolean	ログイン不要でアクセス可能
tab	boolean	下部タブバーにエントリを表示
keepAlive	boolean	<KeepAlive> で View をラップ

3. 権限ガード

router.beforeEach((to) => {
  startProgress();
  if (to.meta.public) return true;
  const auth = useAuthStore();
  if (!auth.isAuthenticated) return { name: "login", query: { redirect: to.fullPath } };
  const required = to.meta.authority as string[] | undefined;
  if (required && !required.some(auth.hasRole)) return { name: "forbidden" };
  return true;
});
router.afterEach(() => stopProgress());

4. 動的タイトル

watchEffect(() => {
  const title = router.currentRoute.value.meta?.title as string | undefined;
  useTitle(title ? `${title} - Vue H5 Template` : "Vue H5 Template");
});