日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

雖然我們是 Java 猿，但是寫起來前端代碼也不含糊！今天我想來和大家聊聊這個(gè)前端的動(dòng)態(tài)菜單，要如何設(shè)計(jì)才顯得專業(yè)！還是以我們的 TienChin 項(xiàng)目為例，大家一起來看看。

成都創(chuàng)新互聯(lián)提供成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)，品牌網(wǎng)站建設(shè)，廣告投放等致力于企業(yè)網(wǎng)站建設(shè)與公司網(wǎng)站制作，10多年的網(wǎng)站開發(fā)和建站經(jīng)驗(yàn),助力企業(yè)信息化建設(shè)，成功案例突破上1000+,是您實(shí)現(xiàn)網(wǎng)站建設(shè)的好選擇.

先來一張截圖看看效果：

那么這樣的菜單是如何設(shè)計(jì)出來的呢？

今天我也不想和大家聊過多的技術(shù)細(xì)節(jié)，就聊聊這個(gè)路由是如何設(shè)計(jì)的，一旦大家明白了路由是如何設(shè)計(jì)的，剩下的問題都是細(xì)枝末節(jié)的問題了。

1. 路由設(shè)計(jì)

有的小伙伴做過 vhr，知道 vhr 里的動(dòng)態(tài)菜單實(shí)現(xiàn)方式，松哥和大家一樣，也是在不斷學(xué)習(xí)不斷進(jìn)步中，今天我想和大家探討 TienChin 項(xiàng)目中動(dòng)態(tài)菜單的實(shí)現(xiàn)方案，看看是否是一種更佳的解決方案。

1.1 菜單設(shè)計(jì)

先來和小伙伴們回顧下 vhr 中的方案：

在 vhr 中，權(quán)限的控制，只控制到二級(jí)菜單，也就是一級(jí)菜單和權(quán)限沒關(guān)系。舉個(gè)例子，現(xiàn)在有一級(jí)菜單 A 和 二級(jí)菜單 B，B 是 A 中的菜單，現(xiàn)在假設(shè)：

• 如果當(dāng)前用戶權(quán)限可以查看 B 菜單，那么 A 菜單會(huì)自動(dòng)顯示出來。
• 如果當(dāng)前用戶權(quán)限無法查看 B 菜單，且 A 菜單中也沒有其他子菜單可以展示，那么 A 菜單就不會(huì)顯示出來。

換言之，A 菜單顯示與否，主要看它里邊有沒有子菜單需要展示，如果有，A 菜單就顯示，如果沒有，A 菜單就不顯示。

vhr 中的思路是這樣的。

在 TienChin 項(xiàng)目中，這一塊有一些變化：

如果 A 中只有一個(gè) B，那么似乎就沒有必要再做一個(gè)兩級(jí)菜單了，直接把 B 展示出來不就行了？用戶操作也方便！

這是第一個(gè)不一樣的地方。

1.2 路由數(shù)據(jù)

基于第一點(diǎn)，就涉及到一個(gè)問題，就是路由接口該如何設(shè)計(jì)？最主要是接口返回的數(shù)據(jù)格式應(yīng)該是什么樣子的？

首先有一點(diǎn)小伙伴們應(yīng)該知道，這里的路由是一個(gè)嵌套路由，也就是一級(jí)菜單中嵌套著二級(jí)菜單。即使這個(gè)地方在展示的時(shí)候，不存在層級(jí)關(guān)系，例如上圖中的促銷活動(dòng)，但是底層的數(shù)據(jù)結(jié)構(gòu)也應(yīng)該是嵌套路由。

好啦，不賣關(guān)子了，我們來看一段路由 JSON：

[{
 "name": "Monitor",
 "path": "/monitor",
 "hidden": false,
 "redirect": "noRedirect",
 "component": "Layout",
 "alwaysShow": true,
 "meta": {
  "title": "系統(tǒng)監(jiān)控",
  "icon": "monitor",
  "noCache": false,
  "link": null
 },
 "children": [{
  "name": "Online",
  "path": "online",
  "hidden": false,
  "component": "monitor/online/index",
  "meta": {
   "title": "在線用戶",
   "icon": "online",
   "noCache": false,
   "link": null
  }
 }, {
  "name": "Job",
  "path": "job",
  "hidden": false,
  "component": "monitor/job/index",
  "meta": {
   "title": "定時(shí)任務(wù)",
   "icon": "job",
   "noCache": false,
   "link": null
  }
 }]
}, {
 "path": "/",
 "hidden": false,
 "component": "Layout",
 "children": [{
  "name": "Role",
  "path": "role",
  "hidden": false,
  "component": "system/role/index",
  "meta": {
   "title": "角色管理",
   "icon": "peoples",
   "noCache": false,
   "link": null
  }
 }]
}]

這里我舉了兩個(gè)菜單的例子，這兩個(gè)例子比較具有代表性，這個(gè)菜單最終顯示效果大概類似下面這樣：

• 系統(tǒng)監(jiān)控

在線用戶

定時(shí)任務(wù)

• 角色管理

大概顯示效果如上圖。

接下來我就來說一下這里幾個(gè)典型屬性：

• redirect：noRedirect 表示該路由在面包屑導(dǎo)航中不可被點(diǎn)擊。
• alwaysShow：如果這個(gè)屬性設(shè)置為 false，那么當(dāng)當(dāng)前菜單只有一個(gè)子菜單的時(shí)候，默認(rèn)情況下就只會(huì)顯示子菜單，而忽略父菜單（如 1.1 小節(jié)所述），但是如果將該屬性設(shè)置為 true，則無論當(dāng)前菜單有幾個(gè)子菜單，都會(huì)將當(dāng)前菜單展示出來（這就類似于 vhr 中的效果了）。
• 每一個(gè)父菜單都有自己的 path，每一個(gè) children 也有自己的 path，父菜單的 path 加上每一個(gè) children 的 path，共同組成每一個(gè) children 的路徑。
• 再來看第二個(gè)角色管理這個(gè)菜單項(xiàng)，由于它的父菜單中只有一個(gè)子菜單項(xiàng)，并且父菜單中也沒有 alwaysShow 屬性，所以這個(gè)菜單項(xiàng)在最終展示的時(shí)候，就只展示里邊的角色管理，父菜單則不會(huì)展示出來（正好，生成的 JSON 中也沒說父菜單的名字、圖標(biāo)等屬性）。

當(dāng)然，不是說你的 JSON 這么寫就自動(dòng)這么顯示，JSON 中的東西只是一個(gè)標(biāo)記，最終怎么顯示，還要看渲染：

  
  
    
          v-for="child in item.children"
      :key="child.path"
      :is-nest="true"
      :item="child"
      :base-path="resolvePath(child.path)"
      class="nest-menu"
    />
  

還有一個(gè)函數(shù)我就沒有列出來了，反正我們看名字也大概知道每一個(gè)函數(shù)的含義。

大家看，這個(gè) div 中實(shí)際上分為了兩部分，上面 template 專門用來處理 children 中只有一項(xiàng)的情況（角色管理），具體處理方式就是把 children 拿出來顯示，其他的則不考慮，具體執(zhí)行的時(shí)候不一定是只有一個(gè) children，也有可能壓根就沒有 children，此時(shí)直接顯示 parent 即可（參考 1.3 小節(jié)）。

下面的 el-submenu 則處理 children 有多個(gè)的情況（系統(tǒng)監(jiān)控）。

另外這里涉及到了一個(gè) resolvePath，也是特別關(guān)鍵的一個(gè)方法，我們來大致看下：

resolvePath(routePath, routeQuery) {
  if (isExternal(routePath)) {
    return routePath
  }
  if (isExternal(this.basePath)) {
    return this.basePath
  }
  if (routeQuery) {
    let query = JSON.parse(routeQuery);
    return { path: path.resolve(this.basePath, routePath), query: query }
  }
  return path.resolve(this.basePath, routePath)
}

這個(gè)函數(shù)的主要左右，就是處理菜單的路徑問題。

我們來看下這個(gè)具體的判斷邏輯：

• 如果這個(gè)菜單的路徑是一個(gè)外鏈（判斷邏輯是查看這個(gè) path 是否有 http 或者 https 等前綴），即 isExternal 返回 true，就把這個(gè)路徑原封不動(dòng)返回。
• 如果這個(gè)菜單的父菜單的路徑是一個(gè)外鏈，則將父菜單的 path 原封不懂返回。
• 如果有查詢參數(shù)，就把參數(shù)加上。
• 最后通過 path.resolve 對(duì)路徑進(jìn)行一個(gè)簡(jiǎn)單運(yùn)算。

有的小伙伴可能對(duì) path.resolve 不熟悉，我簡(jiǎn)單說下：

path.resolve() 方法可以將多個(gè)路徑解析為一個(gè)規(guī)范化的絕對(duì)路徑，它的處理方式類似于對(duì)這些路徑逐一進(jìn)行 cd 操作，然而與 cd 操作不同的是，這些路徑可以是文件，并且可不必實(shí)際存在（resolve() 方法不會(huì)利用底層的文件系統(tǒng)判斷路徑是否存在，而只是進(jìn)行路徑字符串操作）。例如：

path.resolve('foo/bar', '/tmp/file/', '..', 'a/../subfile')

相當(dāng)于：

cd foo/bar
cd /tmp/file/
cd ..
cd a/../subfile
pwd

舉個(gè)簡(jiǎn)單的例子：

path.resolve('/foo/bar', './baz') 
// 輸出結(jié)果為 
'/foo/bar/baz' 

path.resolve('/foo/bar', '/tmp/file/') 
// 輸出結(jié)果為 
'/tmp/file' 

path.resolve('wwwroot', 'static_files/png/', '../gif/image.gif') 
// 當(dāng)前的工作路徑是 /home/javaboy/node，則輸出結(jié)果為 
'/home/javaboy/node/wwwroot/static_files/gif/image.gif'

現(xiàn)在大家知道菜單跳轉(zhuǎn)的路徑是怎么來的了吧！

1.3 外鏈問題

在 TienChin 項(xiàng)目中，菜單還存在一個(gè)外鏈的問題。

這個(gè)外鏈有兩種不同的顯示思路：

• 點(diǎn)擊外鏈，直接打開一個(gè)新的選項(xiàng)卡，在新的選項(xiàng)卡中展示新的頁面。
• 點(diǎn)擊外鏈，在當(dāng)前項(xiàng)目中打開一個(gè)新的選項(xiàng)卡，選項(xiàng)卡中展示新的內(nèi)容。

對(duì)于第一種情況我就不和大家演示了，對(duì)于第二種情況，我截個(gè)圖給大家看下：

就是在當(dāng)前項(xiàng)目的選項(xiàng)卡中，展示一個(gè)外部鏈接的內(nèi)容。

我們先來看第一種情況。即點(diǎn)擊菜單之后，就在一個(gè)新的選項(xiàng)卡中打開網(wǎng)頁，這種菜單的 JSON 格式如下：

{
    "name": "Http://www.javaboy.org",
    "path": "http://www.javaboy.org",
    "hidden": false,
    "component": "Layout",
    "meta": {
        "title": "TienChin健身官網(wǎng)",
        "icon": "guide",
        "noCache": false,
        "link": "http://www.javaboy.org"
    }
}

這個(gè)大家看，也沒有 children，因?yàn)椴恍枰?，這個(gè)顯示的時(shí)候，就當(dāng)成了只有一個(gè) children 來處理，然后菜單項(xiàng)的 path 是一個(gè) http 路徑，一點(diǎn)擊，自然就跳到新的選項(xiàng)卡了。

對(duì)于第二種情況，即點(diǎn)擊外鏈，在當(dāng)前項(xiàng)目中打開一個(gè)新的選項(xiàng)卡，選項(xiàng)卡中展示鏈接的內(nèi)容，它的 JSON 結(jié)構(gòu)類似下面這樣：

{
    "name": "Http://www.javaboy.org",
    "path": "/",
    "hidden": false,
    "component": "Layout",
    "meta": {
        "title": "TienChin健身官網(wǎng)",
        "icon": "guide",
        "noCache": false,
        "link": null
    },
    "children": [
        {
            "name": "Www.javaboy.org",
            "path": "www.javaboy.org",
            "hidden": false,
            "component": "InnerLink",
            "meta": {
                "title": "TienChin健身官網(wǎng)",
                "icon": "guide",
                "noCache": false,
                "link": "http://www.javaboy.org"
            }
        }
    ]
}

這個(gè)其實(shí)也沒啥好說的，類似于上面系統(tǒng)監(jiān)控的那種情況，但是只有一個(gè)子菜單，在菜單渲染的時(shí)候，也是只渲染一個(gè)子菜單。由于父子菜單的 path 都不是以 http 或者 https 之類的地址開頭，所以這個(gè)鏈接最終生成的 path 是 /www.javaboy.org，然后這個(gè)路徑的內(nèi)容將展示在 InnerLink 組件上，最終就是大家上圖中所看到的效果了。

本文名稱：Vue里，多級(jí)菜單要如何設(shè)計(jì)才顯得專業(yè)？
分享URL：http://www.5511xx.com/article/cdcpede.html