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 === '/').childrenthat.collapsed = !that.sidebarOpened;}
})

Ant Design Vue 切换中英文改变Menu和内容相关推荐

Ant design Vue 如何在a-table表格标题/内容上添加一个按钮
项目需求,官网这方面也不讲清楚需求如下方法: fields:[ {// title: 啦啦自定义,dataIndex: 'name',scopedSlots: { title: 'Title' } ...
Ant Design Vue中tabs标签页切换导致页面变宽的问题
问题在使用Ant Design Vue进行开发的时候,使用了tabs标签页,在页里面套用了表格,但是在页面切换后,会发现页面的width会变大差不多2倍,这样会导致页面一些结构的样式发生变化. 解决 ...
Ant design vue动态主题切换的坑与一般性方法
本文原创,并且以吐槽为主,下面开始: Ant design vue是很优秀的框架,不过对于一般小白用户(比如我),文档方面不够友好.官方给出了主题自定义色彩的方案,但是太过于简陋,网上很多技术解决方案 ...
ant design vue table 高度自适应_Vue组件库大评测 Element, iView, HeyUI, Ant Design Vue
今天偶然的机会想了解下其他Vue相关的组件库,网上刚好有文章,顺便自己做一下笔记,算是资源整理吧 .好了,话不多说,直接开始: 组件库的选择对于前端开发有者至关重要的影响,而组件的丰富性以及健壮性是我 ...
2019年 Vue 组件库大评测 Element, iView, HeyUI, Ant Design Vue
2018年我写的Vue组件库对比文档: https://juejin.im/post/5a9628415188257a7b5ac678 一年的时间,每一个组件库都有了更多的发展,Ant Design ...
2019 Electron+Vue+Ant Design Vue仿网易云音乐windows客户端实战分享
特点拖拽播放桌面歌词 mini模式自定义托盘右键菜单任务栏缩略图,歌曲操作音频可视化自动/手动检查更新 Nedb数据库持久化自定义安装路径,安装界面美化浏览器中启动客户端 Travis ...
【Ant Design Vue】之Grid栅格和Space间距
文章目录 Grid 栅格 Space 间距 Grid 栅格 Ant Design Vue 将整个设计建议区域按照 24 等分的原则进行划分,划分之后的信息区块我们称之为『盒子』.建议横向排列的盒子数量 ...
ant design vue pro 支持多页签模式页签可以缓存
ant design vue pro 支持多页签模式页签可以缓存代码贴在最后启动之后页面是这样的: 第一步:修改 src/layouts/BasicLayout.vue 文件,在该文件中添加mu ...
ant design Vue 纯前端实现分页
ant design Vue 纯前端实现分页功能 (有选择的话最好让后端分页,前端分页可能会有问题,为了性能,尽量不要前端分页) 自己想的一个简单方法: 通过页码改变事件,每页数据个数改变事件,获取改 ...

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

Ant Design Vue 结构

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

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

Ant Design Vue 切换中英文改变Menu和内容相关推荐

最新文章

热门文章

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

Ant Design Vue 结构

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

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

Ant Design Vue 切换中英文改变Menu和内容相关推荐

最新文章

热门文章

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