Teek Design Vue3

主题

Teeker2025-07-24
718
3m
Get...

路由国际化 ​

多语言 ​

下面讲解国际化和非国际化的简单配置。

非国际化 ​

菜单、面包屑、标签页的文字显示取决于路由 meta 的 title：

ts
export const rolesRoutes: RouterConfigRaw[] = [
  {
    path: "/home",
    name: "Home",
    component: import("@/views/home/index.vue"),
    meta: {
      title: "首页",
    },
  },
];

这样就可以在菜单、面包屑、标签页看到 首页 文字。

国际化 ​

Teek 支持国际化路由的开和关。

局部开启/关闭 ​

路由的 meta 里使用 useI18n 属性：

ts
export const rolesRoutes: RouterConfigRaw[] = [
  {
    path: "/home",
    name: "Home",
    component: import("@/views/home/index.vue"),
    meta: {
      useI18n: true,
    },
  },
];

有 3 种方式配置路由国际化：

  • name 属性填写一个字符串，Teek 会根据该值去国际化文本匹配，如 name: "Home"
  • title 属性使用 {{}} 包起来，如 title: {{ _route.Home }}
  • title 属性使用国际化函数来动态读取国际化文本，如 t("_route.Home ")

国际化文件在 src/common/languages/locales 目录下

  • zh-CN.ts 是中文配置文件
  • en-US.ts 是英文配置文件

假设两个文件内容：

ts
export default {
  _route: {
    Home: "首页",
  },
};
ts
export default {
  _route: {
    Home: "Home",
  },
};

name 配置国际化 ​

name 配置了国际化文件，则 name 值会作为 key 读取国际化文件。

假设路由配置为：

ts
export const rolesRoutes: RouterConfigRaw[] = [
  {
    path: "/home",
    name: "Home",
    component: import("@/views/home/index.vue"),
  },
];

以上面的国际化文件内容为例，此时 Teek 会自动添加前缀 _route. 拼接 name 属性值，即寻找 _route.Home 的值。

_route 前缀更改

可以在 src/common/config/service/base-config 的 nameI18nPrefix 修改 _route 前缀。

title 配置国际化 ​

如果配置 title 属性，则 Teek 会解析 {{}} 内的字符串，得到 _route.Home，然后去 src/common/languages/locales 下去寻找对应的 value：

假设路由配置为：

ts
export const rolesRoutes: RouterConfigRaw[] = [
  {
    path: "/home",
    name: "Home",
    component: import("@/views/home/index.vue"),
    meta: {
      title: "{{ _route.Home }}",
    },
  },
];

当 Teek 切换到中文时显示 首页，切换英文时显示 Home。

如果没有配置国际化文件，则默认读取 name 的最后一个 . 的值，如上面的 _route.Home 作为文字渲染。

t 函数配置国际化 ​

title 使用 t 函数可以动态读取国际化文件，如：

ts
import { t } from "@/common/languages";

export const rolesRoutes: RouterConfigRaw[] = [
  {
    path: "/home",
    name: "Home",
    component: import("@/views/home/index.vue"),
    meta: {
      title: t("_route.Home"),
    },
  },
];

警告

t 函数配置国际化在项目启动时立即生效，因此使用关闭国际化功能的 useI18n、routeUseI18n 配置无效。

全局开启/关闭 ​

有时候项目是国际化项目，而路由非常多，给每个路由配置 useI18n: true 比较麻烦，所以可以在 src/common/config/service/base-config 里的 router 开启全局国际化：

ts
export const defaultServiceConfig: ServiceConfig = {
  router: {
    routeUseI18n: true,
  },
};

如果您想配置新的国际化语言，请阅读 国际化 文章。

提示

如果需要关闭全局路由国际化，将 routeUseI18n 设置为 false 即可。