vue --- 關於多個router-view視圖組件，渲染同一頁面

 

vue.js多視圖的使用，能夠提升網頁組件化，模塊化

好比使用多視圖，能夠將網站頁面封裝header、footer、navbar等多個公共部分，
遇到修改公共部分的文案信息等數據的時候，再也不須要逐一修改每一個頁面；只須要修改各個不一樣文件引用的惟一對應的視圖文件便可完成全部效果的自動更新，
更便捷，更省時，更省力地去管理網站的不一樣版塊。
--------------------- 

總結說明：
　　1.之前能夠一次性放一個坑對應一個路由和顯示一個組件
　　   a. 一次行爲 = 一個坑 + 一個路由 + 一個組件
　　   b. 一次行爲 = 多個坑 + 一個路由 + 多個組件
　　2.components多視圖 是一個對象，對象內多個key和value
　　   a. key對應視圖的name屬性
　　   b. value就是要顯示的組件對象
　　3.多個視圖（name屬性省略與否）
　　   省略： <router-view></router-view> —— name就是default
　　   不省略： <router-view name='xxx'></router-view> —— name就是xxx
---------------------

效果圖預覽：

相關文件代碼以下：

1. main.js文件

import Vue from 'vue';
import VueRouter from 'vue-router';
//引入主體（頁面初始化顯示）
import App from './components/app.vue';
//一個個link對象 - 分類
import Header from './components/header.vue';
import Footer from './components/footer.vue';
/*

//註冊全局頭部、底部組件
Vue.component('headerVue',Header);
Vue.component('footerVue',Footer);


*/

//安裝插件
Vue.use(VueRouter);//掛載屬性

//建立路由對象並配置路由規則
let router = new VueRouter({
    //routes
    routes: [
    //一個個link對象
    {
        path: '/',
        components: { // key => value
            header: Header,
            default: Footer, //默認省略不寫name的狀況
            footer: Footer
        }
    }

  ]
});

// new Vue 啓動 
new Vue({
  el: '#app',
  render: c => c(App),
  //讓vue知道咱們的路由規則
  router:router,//能夠簡寫爲router
})
--------------------- 

2. app.vue文件

<template>
  <div>
    <header-vue></header-vue>
    <hr />
        <!--留坑，很是重要-->
            <router-view class="main" name="header"></router-view>
            <router-view class="main"></router-view><!--name省略表示name='default'-->
            <router-view class="main" name="footer"></router-view>
        <hr />
        <footer-vue></footer-vue>



  </div>
</template>

<script>
    export default {
      data(){
        return{

        }
      },
      methods:{

      }
    }
</script>

<style scoped>
    .main{height: 100px;}
</style>
--------------------- 

3. header.vue文件

<template>
    <div>
        我是頭部        
    </div>
</template>

<script>
    export default{
        data(){
            return{

            }
        },
        methods:{

        }
    }
</script>

<style scoped>  
</style>

--------------------- 

4. footer.vue文件

<template>
  <div>
    我是底部    
  </div>
</template>

<script>
    export default {
      data(){
        return{

        }
      },
      methods:{

      }
    }
</script>


<style scoped>
</style>
---------------------