路由与导航

路由由特性包管理，而非各应用。应用外壳将每个特性的 routes 导出组合成一个路由实例。

1. 路由实例

@vh5/app-shell 统一创建路由，适配应用无需配置路由。

// packages/app-shell/src/router/index.ts
import { mergeRouteModules } from "@vh5/utils";
import { authRoutes } from "@vh5/feature-auth";
import { homeRoutes } from "@vh5/feature-home";
import { productRoutes } from "@vh5/feature-product";
import { userRoutes } from "@vh5/feature-user";

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. 特性路由模块

// packages/features/product/src/routes.ts
export const productRoutes: RouteRecordRaw[] = [
  {
    path: "product",
    name: "product-list",
    component: () => import("./views/List.vue"),
    meta: { title: "商品列表", authority: ["user", "admin"], tab: true },
  },
  {
    path: "product/:id",
    name: "product-detail",
    component: () => import("./views/Detail.vue"),
    meta: { title: "商品详情", authority: ["user", "admin"] },
  },
];

meta 字段说明：

字段	类型	说明
title	string	文档标题 + 导航栏标题
authority	string[]	允许访问的角色（省略 ⇒ 已登录即可访问）
public	boolean	无需登录即可访问
tab	boolean	在底部 TabBar 显示入口
keepAlive	boolean	用 <KeepAlive> 包裹视图

3. 权限守卫

@vh5/app-shell/router/guards.ts 中注册的单一全局守卫：

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. 类型安全导航

unplugin-vue-router 生成 types/typed-router.d.ts，推荐使用命名导航：

router.push({ name: "product-detail", params: { id } });

5. 后端驱动路由（可选）

import { generateRoutesByBackend } from "@vh5/utils";
const routes = await generateRoutesByBackend({ fetchMenuListAsync, layoutMap, pageMap });
router.addRoute({ path: "/", component: BasicLayout, children: routes });

6. 布局与标题

BasicLayout 包含顶部导航栏（meta.title）和底部 TabBar（meta.tab === true 的路由）。文档标题在外壳中自动更新：

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