[JavaScript知识库]Ant Design Vue 切换中英文改变Menu和内容

前言，目前一个小项目使用的是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;
      }
  })

  ? ? ?