h5页面用vue3怎么做路由扁平化

要实现路由扁平化，可以通过使用 Vue Router 的嵌套路由和路由元信息来实现。

首先，在创建 Vue Router 实例时，需要设置 `mode` 为 `history`，以去除 URL 中的 `#` 符号，使得 URL 更加扁平。

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 路由配置
  ]
});

然后，在路由配置中，可以使用嵌套路由来实现扁平化。例如，可以将 `/user` 路由作为父路由，然后将 `/user/profile` 和 `/user/settings` 作为子路由，如下所示：

const routes = [
  {
    path: '/user',
    component: UserLayout,
    children: [
      {
        path: 'profile',
        component: UserProfile
      },
      {
        path: 'settings',
        component: UserSettings
      }
    ]
  }
];

最后，可以为每个路由设置路由元信息，以便在路由切换时获取相关信息。例如，可以为 `/user` 路由设置一个 `meta` 属性，用于指定该路由的名称：

const routes = [
  {
    path: '/user',
    component: UserLayout,
    meta: { title: '用户中心' },
    children: [
      {
        path: 'profile',
        component: UserProfile,
        meta: { title: '个人资料' }
      },
      {
        path: 'settings',
        component: UserSettings,
        meta: { title: '账户设置' }
      }
    ]
  }
];

在路由切换时，可以通过 `to` 和 `from` 参数获取当前路由和目标路由的路由元信息，从而实现动态修改页面标题等操作。

router.beforeEach((to, from) => {
  document.title = to.meta.title || '默认标题';
});

这样，就可以通过使用嵌套路由和路由元信息来实现 H5 页面的路由扁平化。