前端基礎學習 應用元件寫選單

開發工程中會發現，對於選單的選單項，可能有多種情況，有的有多重子選單，而有的無子選單，如果寫成固定模式，那麼若改變選單模式，則需要改變大量**，這裡如果呼叫元件，並且在需要的地方，經過判斷重複呼叫，可以大大提高效率

主要思想是：

講選單項分成有子選單和無子選單的情況，無子選單的情況，直接呼叫el-menu-item，若有子選單，則呼叫el-submenu，如果子選單還有子選單，重複呼叫即可

這裡主要分成了兩個元件：menuitem與menusub

menuitem對應無子選單情況

menusub對應有子選單情況

話不多說，上**

選單結構

// menulist的目的是為了在首頁選單部分引入，他們直接存在父子關係

export
default
},]}
,]

// routerlist的目的是為了引入對應元件，他們直接沒有父子的關係

export
default[,
,,]

:

default
-active=
"active"
ref=
"menunref"
@select=
"handleselect"
style=
"border:none"
>
for=
"menu in menuslist"
>
<
!-- 如果當前選單項沒有children，則是menuitem，menu傳遞給子元件 --
>
"!menu.children || !menu.children.length"
:menu=
"menu"
:key=
"menu.path"
:index=
"menu.path"
/>
<
!-- 如果當前選單項有children，則是menusub，menu，active傳遞給子元件 --
>
else
:active=
"active"
:menu=
"menu"
:index=
"menu.path"
:key=
"menu.path"
/>
<
/template>
<
/el-menu>

"menu.path"

:key=
"menu.path"
>
"title"
>
}<
/span>
<
/el-menu-item>
<
/template>
export
default}}
,data()
}}<
/script>

"menu.path"

:path=
"active"
>
"title"
>
"title"
>
}<
/span>
<
/template>
for=
"child in menu.children"
>
"child.children === undefined"
:menu=
"child"
:key=
"child.path"
/>
else
:menu=
"child"
:key=
"child.path"
/>
<
/template>
<
/el-submenu>
<
/template>
import menuitem from
'../components/menuitem'
export
default
,  props:},
active: string
},data()
}}<
/script>
"scss"
>
<
/style>

前端基礎學習 實現選單預設高亮

在建立完專案會出現重新整理當前頁面，但是選單會回到初始狀態，這裡主要記錄一下，當我們重新整理頁面後，選單高亮與對應頁面相匹配 在element ui官網可以看到，default active繫結的是當前啟用選單的 index 我們在選單中，index所繫結的變數是path，即路由路徑，所以我們實現當...

前端學習 動態元件 非同步元件

切換元件button v bind is currenttab component div vue.component component 1 vue.component component 2 vue.component component 3 newvue methods 但是在上面的例子中，可...

學習前端 vue元件 命名路由

有時候我們在定義路由跳轉時，沒必要使用 path。我們可以在定義路由時，附加名稱，這樣我們在使用時，直接使用name 來定義跳轉路由。使用步驟 1 定義路由時要 新增路由名稱 name 屬性。例如 const router new vuerouter 2.使用name,to前加 表示屬性繫結，nam...