Vue.js多视图的使用

比如使用多视图，可以将网站页面封装header、footer、navbar等公共部分，
遇到修改公共部分的文案信息等数据的时候，不再需要逐一修改每个页面；只需要修改各个不同文件引用的唯一对应的相同视图文件即可完成所有不同页面效果的自动同步更新， 从而更便捷，更省时，更省力地去管理网站的不同部分。

总结说明：

以前可以一次性放一个坑对应一个路由和显示一个组件 
a. 一次行为 = 一个坑 + 一个路由 + 一个组件 
b. 一次行为 = 多个坑 + 一个路由 + 多个组件
components多视图 是一个对象，对象内多个key和value 
a. key对应视图的name属性 
b. value就是要显示的组件对象
多个视图<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:{
            header:Header,
            default:Footer,
            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>
            <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>

转自博客：https://blog.csdn.net/qq_35393869/article/details/80267063