Ant Design Vue 切换中英文改变Menu和内容

最新推荐文章于 2024-02-20 16:02:11 发布

还未秃的收尾新手

最新推荐文章于 2024-02-20 16:02:11 发布

阅读量1.6k

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/fearlessnesszhang/article/details/123280873

版权

前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍了在AntDesignVue项目中如何实现动态路由与国际化语言切换的无缝配合。通过在登录时将接口返回的路由数据存储到本地缓存，并在切换语言时重新请求接口更新路由，同时监听路由缓存变化以更新Menu，确保内容和菜单的中英文切换同步。此外，还展示了监听localStorage变化并在BasicLayout.vue中响应路由变化的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言，目前一个小项目使用的是Ant Design Vue,情况是路由从接口获取并渲染到页面上，切换国际化语言时，Menu 和内容都中英文自动切换。

Ant Design Vue 结构

Ant Design Vue接口获取路由并渲染

切换国际化内容和 Menu的操作

内容改变：

<template>
    <a-input v-model="name" :placeholder="$t('model.name')" allow-clear />
</template>
<script>
import i18n from '../../../../config/i18n'
export default {
  data() {
    return {}
  },
  created() {},
  computed: {
    columns() {
      return [
        {
          title: i18n.t('number'),
          dataIndex: 'number',
          scopedSlots: {
            customRender: 'number'
          }
        }
      ]
    }
  }
}
</script>

Menu的操作

项目Menu是根据接口获取后渲染且渲染界面 BasicLayout.vue 版块中

我想到的解决办法是

登录时路由接口返回的数据保存到缓存 localStorage 中
切换国际化语言时，重新请求路由接口并且赋修改语言的路由
在BasicLayout.vue 监听路由缓存的变化，对路由重新赋值，达到切换menu数据的目的

监听缓存

localStorage.js

export default function tools () {
    const signSetItem = localStorage.setItem;
    localStorage.setItem = function (key, val) {
      const setEvent = new Event('setItemEvent');
      setEvent.key = key;
      setEvent.value = val;
      window.dispatchEvent(setEvent);
      signSetItem.apply(this, arguments);
    };
  }

vue 引入 - main.js

import storage from './utils/localstorage'

Vue.use(storage)

在BasicLayout.vue放入监听

var that = this;
window.addEventListener('setItemEvent', function (e) {//监听
    if(e.key == 'routers'){//缓存的key
        //改变menu的值
        that.menus = e.value.find(item => item.path === '/').children
        that.collapsed = !that.sidebarOpened;
    }
})