vue后台管理系统学习(8)--左侧菜单添加

   由于不熟悉这个项目，添加菜单折腾了两天，才搞明白，菜单还涉及到国际化问题，这里我们添加了一个主菜单，两个字菜单

   基础数据 

          -- 数据字典

         -- 小区管理

 先看下效果图

   

  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都 要小写