vue后台管理系统学习(8)--左侧菜单添加
由于不熟悉这个项目,添加菜单折腾了两天,才搞明白,菜单还涉及到国际化问题,这里我们添加了一个主菜单,两个字菜单基础数据-- 数据字典-- 小区管理先看下效果图1.添加国际化首先找到src/lang/zh.js文件,添加国际化内容,在route:对象中添加2. 添加view页面...
·
由于不熟悉这个项目,添加菜单折腾了两天,才搞明白,菜单还涉及到国际化问题,这里我们添加了一个主菜单,两个字菜单
基础数据
-- 数据字典
-- 小区管理
先看下效果图
1.添加国际化
首先找到src/lang/zh.js文件,添加国际化内容,在route:对象中添加
2. 添加view页面
在src/views文件下创建 basedata文件夹,在文件夹下添加court.vue和bankplat.vue文件
3. 配置路由
在src/router中的index.js文件中配置路由
{
path: '/baseData',
component: Layout,
redirect: '/basedata/bankplat',
name: 'BaseData',
meta: {
title: 'baseData',
icon: 'example'
},
children: [
{
path: 'bankplat',
component: () => import('@/views/basedata/bankplat'),
name: 'BankPlat',
meta: { title: 'bankPlat' }
},
{
path: 'court',
component: () => import('@/views/basedata/court'),
name: 'Court',
meta: { title: 'court' }
}
]
},
这样就完成了。
有以下几点要注意
1. 国际化是通过路由meta中的title来进行的,如果选择的中文,国际化会根据title标记来查找对应的中文,所有说title对应的值一定要与zh.js文件中对应的值一样的
2.根据当前选择的语言来进行国际化的内容,关键方法在src/utils/i18n.js文件中
// translate router.meta.title, be used in breadcrumb sidebar tagsview
export function generateTitle(title) {
console.log(title)
const hasKey = this.$te('route.' + title)
if (hasKey) {
// $t :this method from vue-i18n, inject in @/lang/index.js
const translatedTitle = this.$t('route.' + title)
return translatedTitle
}
return title
}
3. 书写规范
路由中的name都要大写,path都 要小写
更多推荐
已为社区贡献3条内容
所有评论(0)