vue多视图

Posted 2021-01-25 h5it

第一步   在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

　　　　　　　　}

　　　　　　},

　　]

})

*一次加载三个组件