前言，目前一个小项目使用的是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 === '/').childrenthat.collapsed = !that.sidebarOpened;}})
