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