Skip to content

Latest commit

 

History

History
119 lines (108 loc) · 3.61 KB

49-%E5%AE%9E%E7%8E%B0%E4%BE%A7%E8%BE%B9%E6%A0%8F%E5%A4%9A%E8%AF%AD%E8%A8%80.md

File metadata and controls

119 lines (108 loc) · 3.61 KB

目标

实现侧边栏动态多语言渲染。

开发

首先我们需要将我们的请求菜单的api切换到我们的多语言的mock数据中，方便我们去实现。
在api/user.ts中

// export const userRoutesUrl = '/user/menus'
export const userRoutesUrl = '/user/menu-lang'

切换到多语言的数据后，我们会发现我们的菜单发生变化了，接下来我们根据我们菜单的数据，去实现一下我们的菜单。
首先我们在pages下创建一个dashboard目录。然后分别创建一个analysis.vue和workspace.vue的文件。

<script lang="ts" setup>

</script>

<template>
  <div>
    Analysis
  </div>
</template>

<style scoped>

</style>

<script lang="ts" setup>

</script>

<template>
  <div>
    Workspace
  </div>
</template>

<style scoped>

</style>

然后我们在routes/modules中创建一个dashboard.ts的文件：

const DashboardAnalysis = () => import('~/pages/dashboard/analysis.vue')
const DashboardWorkspace = () => import('~/pages/dashboard/workspace.vue')
export default {
  DashboardAnalysis,
  DashboardWorkspace,
}

然后我们发现配置完成后页面不能正常访问了，是因为我们还需要调整一下我们的dynamic-routes.ts的默认重定向的路由地址：

export const rootRouter: RouteRecordRaw = {
  path: '/',
  name: 'default-router',
  redirect: '/dashboard',
  component: Layout,
  children: [],
}

然后我们再刷新，会发现我们现在就是正确的页面地址了。
现在给我们返回的title是多语言的title，所以我们还是需要先配置一下基础的多语言。
在locales/pages下分别配置zh-CN和en-US

	'pages.dashboard.title': 'Dashboard',
  'pages.dashboard.analysis.title': 'Analysis',
  'pages.dashboard.workspace.title': 'Workspace',
  'pages.jump.baidu': 'Jump to Baidu',
  'pages.dashboard.title': '仪表盘',
  'pages.dashboard.analysis.title': '分析页',
  'pages.dashboard.workspace.title': '访问量',
  'pages.jump.baidu': '跳转百度',

最后我们来实现一下多语言的部分在side-title.vue中：

<template v-if="hasChildren">
    {{ $t(title) }}
  </template>
  <template v-else-if="isFullPath">
    <a :href="path" :target="target">{{ $t(title) }}</a>
  </template>
  <template v-else>
    <router-link :to="path">
      {{ $t(title) }}
    </router-link>
  </template>

查看效果。
最后我们发现，标题之前我们配置了多语言，所以导致了我们的标题的部分现在显示的也是多语言的key，所以我们这一部分也需要调整一下。
在routes/router-guard.ts中：

const title = to.meta?.title
if (title) {
+  const localeTitle = i18n.global.t(title)
  document.title = `${localeTitle} - ${appStore.layout.title}`
}

但是我们发现我们切换多语言的时候不能动态的更新标题，那么接下来我们来实现一下切换动态更新标题。
在composable/auto-lang.ts中：

const { locale, getLocaleMessage, t } = useI18n()
const route = useRoute()
const appStore = useAppStore()
const setLanguage = async (lang: string) => {
  try {
    await loadLanguageAsync(lang)
    appLocale.value = lang
    locale.value = lang
    const title = route.meta.title
    if (title) {
      const localeTitle = t(title)
      document.title = `${localeTitle} - ${appStore.layout.title}`
    }
  }
  catch (e) {

  }
}

然后再进行测试。