是否可以让顶部标签栏的名称动态修改为自定义的名称？

[crazywhalecc]

如上图，有项目列表、项目详情。因为这个名称是通过 router.ts 中写死的，目前还没找到一个可以在 page 内动态调用修改这个标题的地方。因为我只有进入页面后通过传入的项目 ID 才能拿到项目名称，所以只能在加载完页面后更新（例如更新为 项目详情-xxx）。

路由配置：

export default [
  {
    path: '/project',
    component: Layout,
    redirect: '/project/list',
    name: 'project-list-main',
    meta: { title: '项目管理', icon: 'fact-check' },
    children: [
      {
        path: 'list',
        name: 'project-list',
        component: () => import('@/pages/project/list/index.vue'),
        meta: { title: '项目列表', keepAlive: false },
      },
      {
        path: ':projectId/info',
        name: 'project-info',
        component: () => import('@/pages/project/info/index.vue'),
        meta: { title: '项目详情', hidden: true },
      },
      {
        path: 'add',
        name: 'project-add',
        component: () => import('@/pages/project/add/index.vue'),
        meta: { title: '项目新增', hidden: true, keepAlive: false },
      },
    ],
  },
];

[timi137137]

动态路由本身就可以自定义名称，你可以借鉴卡一下

[crazywhalecc]

谢谢提示，我最终没用动态路由，看了下 menu nav tab 的源码，应该是使用了 routerStore 作为数据绑定，我只需要在当前页面找到当前页面的路由后修改 title 就成功了。代码如下：

const tmps = `/project/${projectId.value}/info`;
  tabsRouterStore.tabRouters.forEach((x) => {
    if (x.name === 'project-info' && x.path === tmps) {
      console.log(tmpProjectInfoData.value);
      x.title = `项目详情-${tmpProjectInfoData.value.project_name}`;
      router.currentRoute.value.meta.title = `项目详情-${tmpProjectInfoData.value.project_name}`;
    }
  });