首先看一下一般的後臺管理系統頁面
大體分爲三個板塊（且三個板塊都爲組件）
- 模塊一
header模塊主要顯示登錄用戶的信息
- 模塊二
側邊欄導航欄，主要是爲了實現根據不同的權限來分配不同的菜單（下一篇文章講解）
- 模塊三
主體內容模塊，一般切換的組件都這這裏
主要講解模塊三
上面說着三個都爲組件，那麼要放在一個視圖容器裏，那麼就是vue中App.vue文件中的讓其顯示，當然這裏不用大家配置什麼東西
接下來在我們vue-cli中的router文件夾中index.js文件配置默認顯示的頁面
我配置的是pages/main.vue文件，那麼接下來看一下main.vue文件
如上圖我將（header模塊）（banner模塊這裏假設爲側邊欄模塊）（fooer模塊可有可無）
但是唯一的也是重點的是我主體內容模塊我並沒有寫組件，而是又用了一個視圖容器
那麼就有了，多個嵌套，如何才能讓固定顯示自己想要的組件的問題
廢話不多說上代碼
還是在vue-cli中的router文件夾中index.js文件配置中這樣寫
就是在router路由裏面添加children屬性，但是切記children屬性中path前面不能添加 “/”