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{
  width: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 
       }, 
   ] 
},