Vue命名視圖

今天在學習Vue的時候被命名視圖困擾了一上午，明明是正確的語句缺無法渲染出頁面，按照官方以及網上的很多資料也沒有解決問題，結果重新創建了一個新項目復制過去之后成功了，也是醉了。

首先放上官方鏈接：https://router.vuejs.org/zh/guide/essentials/named-views.html.

命名視圖簡單來說就是在一個頁面同時使用多個組件，多個視圖同時存在一個路徑之中，這時候就需要多寫幾個router-view了，把不同的router-view設置不同的name，在index.js中設置name對應的組件以及路徑。

//index.js文件import Index from '@/components/Index' import LoginHeader from '@/components/LoginHeader' export default new Router({mode: 'history',routes: [{path: '/',name: 'login',components: {header: LoginHeader, //這里設置 name：組件名main: Index}}] }) //APP.vue <template><div id="app"><router-view name="header"></router-view><router-view name="main"></router-view></div> </template><script> export default {name: 'App' }

APP.vue中只要寫入router-view就可以了，這樣在路徑/中視圖中出現的就是這兩個組件了。
Vue小白，剛剛接觸，如果有錯誤請大佬提出，我馬上改正。

總結

以上是生活随笔為你收集整理的Vue命名视图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。