vue-部分导航栏在页面公共出现或者单独出现的处理方法

目录结构：

公共组件-轮播图

login/index.vue

<template>
    <div class='Imgroll'>
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="(item,index) in imgUrls" :key="index">
          <img class="img" ref='img' :src="item.imageUrl" />
        </el-carousel-item>
      </el-carousel>
    </div>
</template>
<script>
export default {
    name: 'Logins',
    data(){
        return{
            imgUrls:[]
        }
    },
    mounted(){
      this.getImages();
    },
    methods:{
      getImages() {
        this.getImgUrl().then(res => {
          this.imgUrls = res
        })
      },

      // 数据请求服务，一般是返回的一个promise对象，  是一个异步处理的解决方案，
      getImgUrl(){
        return new Promise((resolve,reject) => {
          setTimeout(() => {
            const data = [];
            //遍历图片
            for (let index = 1; index < 4; index++) {
              const obj = {};
              //对图片名如果小于十就在前面加一个0
              if (index < 10) {
                index = '0' + index
              }
              obj.imageUrl = require(`../../../assets/img/tabbar/${index}.png`)
              data.push(obj)
            }
            resolve(data);
            reject();
          }, 100);
        })
      }
    },
}
</script>
<style scoped>
.img{
  100%;

}
</style>>

content/index.vue

轮播在上

<template>
  <div class="ces">
    <Login />  #将引入的轮播组件在页面中进行引用，如果在<router-view/>上方则页面展示时轮播组件在上，反之则在下
    <router-view/>   #将需要本页面（轮播）的内容进行路由挂载，并且需要在router/index.js中配置（Content组件）的路由这个<router-view/>为后续需要展示（轮播）组件的页面占个位置
  </div>
</template>

<script>
import Login from './login/index'     #-------将login/index.vue作为组件进行导入
export default {
  name: 'Content',                    #-------content/index.vue本页面组件名称为Content
  components: {
      Login                           #-------将login/index.vue导入的组件进行注册

 } 15 } 16 </script> 17 18 <style> 19 </style>

轮播在下

<template>
  <div class="ces">
    <router-view />
    <Login/>
  </div>
</template>

<script>
import Login from './login/index'
export default {
  name: 'Content',
  components: {
      Login
  }
}
</script>

<style>
</style>

router/index.js

路由配置

路由引入：

import Vue from 'vue'
import Router from 'vue-router'
import Footer from '../components/Footer.vue'; #-----正常加载路由
const Content =()=> import('../components/content');  #-------懒加载路由，将整个轮播组件作为一个整体导入

路由配置:

{
      path:'/content/',
      name:'Content',
      component:Content,
      children:[     #---------当路由为http://localhost:8080/content/footer时页面显示为content组件（轮播）+footer组件的内容
        {
          path:'footer',  #-------当路由为http://localhost:8080/footer时页面只展示footer组件的内容
 8           name:'Footer',
 9           component:Footer 10  },
 11        {
 12          path: 'layout', 
         name:'Layout', 
         component:Layout 
       }, 
   ] 
},