第一步 在app.vue中

<router-view class="b" name="header"> </router-view>

<router-view class="b" > </router-view> //不寫name名字的就是默認路由

<router-view class="b" name="footer"> </router-view>

第二步 在router.js中

router.js

//引入組件

import header from ‘./components/header.vue‘

import footer from ‘./components/footer.vue‘

let router =new VueRouter({

　　routers:[

{

　　　　　　path:‘/‘,

　　　　　　components:{ //components寫多個必須加s，不然會報錯

　　　　　　　　header:header

　　　　　　　　deafult:footer

　　　　　　　　footer:footer

　　　　　　　　}

　　　　　　},

　　]

})

*一次加載三個組件

vue多視圖