以下是以實際操作講解element-ui導航菜單如何設置子路由。
1.首先為了方便快捷,使用element-ui布局容器,在側(cè)邊也就是Aside中,放置element-ui導航菜單。
2.在導航菜單源代碼中,找到<el-menu>標簽,根據(jù)element-ui官網(wǎng)介紹,在這個標簽上添加“router”,將導航欄轉(zhuǎn)為路由模式。如下圖:
3.在需要展現(xiàn)頁面的位置添加<router-view>標簽,用于展示頁面。這里為了在main中展現(xiàn),所以需要將<router-view>標簽設置在<el-main>中,如下圖:
4.這是一個vue項目,所以需要找到router文件夾中的index.js文件對路由進行設置。具體操作如圖:
5.在配置好子路由后,就可以在導航菜單欄中使用,使用時只需對index設置需要跳轉(zhuǎn)頁面路徑就行了,如下圖: