實現思路：

1. 在一個單獨的vue組件文件中只寫出上導航欄和左側導航欄的內容
2. 將你想要展示的頁面主內容寫到單獨的組件中
3. 在index.js寫路由，將【想要展示的頁面主內容的路由】作為【子路由】寫在【只寫出上導航欄和左側導航欄的路由】的下面；

---

在elment-plus官網上找到自己需要的布局容器模型

Container 布局容器 | Element Plus (element-plus.org)https://element-plus.org/zh-CN/component/container.html#%E5%B8%B8%E8%A7%81%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80

---

重要代碼

我的側邊欄是菜單，在菜單里面加上router屬性，它的子菜單你點擊它才能跳轉到相應的路由去展示內容；

---

?注意一定要主內容區域的標簽里加上黃色區域的代碼，這樣你的其他頁面才能在主內容區域顯示；

<el-main style="background: #f6f4f4"><router-view/>
</el-main>

【核心】index.js路由的書寫

?/0路由里只寫了上導航欄和左側導航欄的框架（后面簡稱框架），主體區是沒有內容的，我在/first路由下寫了首頁要展示的內容，所以當訪問/0路由時,使用redirect將路由重定向到/firest路由，就可以既展示框架又展示主體內容，children:[ ]里面寫了所有要在主體區域的頁面路由；

---

效果圖：

?

?

?

?