目錄結構：

公共元件-輪播圖

login/index.vue

 1 <template>
 2     <div class='Imgroll'>
 3       <el-carousel indicator-position="outside">
 4         <el-carousel-item v-for="(item,index) in imgUrls" :key="index">
 5           <img class="img" ref='img' :src="item.imageUrl" />
 6         </el-carousel-item>
 7
 
       </el-carousel>
 8     </div>
 9 </template>
10 <script>
11 export default {
12     name: 'Logins',
13     data(){
14         return{
15             imgUrls:[]
16         }
17     },
18     mounted(){
19       this.getImages();
20     },
21     methods:{
22       getImages() {
 
23         this.getImgUrl().then(res => {
24           this.imgUrls = res
25         })
26       },
27 
28       // 資料請求服務，一般是返回的一個promise物件，  是一個非同步處理的解決方案，
29       getImgUrl(){
30         return new Promise((resolve,reject) => {
31           setTimeout(() => {
32             const data = [];
 
33             //遍歷圖片
34             for (let index = 1; index < 4; index++) {
35               const obj = {};
36               //對圖片名如果小於十就在前面加一個0
37               if (index < 10) {
38                 index = '0' + index
39               }
40               obj.imageUrl = require(`../../../assets/img/tabbar/${index}.png`)
41               data.push(obj)
42             }
43             resolve(data);
44             reject();
45           }, 100);
46         })
47       }
48     },
49 }
50 </script>
51 <style scoped>
52 .img{
53   width:100%;
54 
55 }
56 </style>>

content/index.vue

輪播在上

 1 <template>
 2   <div class="ces">
 3     <Login />  #將引入的輪播元件在頁面中進行引用，如果在<router-view/>上方則頁面展示時輪播元件在上，反之則在下
 4     <router-view/>   #將需要本頁面（輪播）的內容進行路由掛載，並且需要在router/index.js中配置（Content元件）的路由這個<router-view/>為後續需要展示（輪播）元件的頁面佔個位置
 5   </div>
 6 </template>
 7 
 8 <script>
 9 import Login from './login/index'     #-------將login/index.vue作為元件進行匯入
10 export default {
11   name: 'Content',                    #-------content/index.vue本頁面元件名稱為Content
12   components: {
13       Login                           #-------將login/index.vue匯入的元件進行註冊

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

輪播在下

 1 <template>
 2   <div class="ces">
 3     <router-view />
 4     <Login/>
 5   </div>
 6 </template>
 7 
 8 <script>
 9 import Login from './login/index'
10 export default {
11   name: 'Content',
12   components: {
13       Login
14   }
15 }
16 </script>
17 
18 <style>
19 </style>

router/index.js

路由配置

路由引入：

1 import Vue from 'vue'
2 import Router from 'vue-router'
3 import Footer from '../components/Footer.vue'; #-----正常載入路由
4 const Content =()=> import('../components/content');  #-------懶載入路由，將整個輪播元件作為一個整體匯入

路由配置:

 1 {
 2       path:'/content/',
 3       name:'Content',
 4       component:Content,
 5       children:[     #---------當路由為http://localhost:8080/content/footer時頁面顯示為content元件（輪播）+footer元件的內容
 6         {
 7           path:'footer',  #-------當路由為http://localhost:8080/footer時頁面只展示footer元件的內容
 8           name:'Footer',
 9           component:Footer 10  },
 11        {
 12          path: 'layout', 
 13          name:'Layout', 
 14          component:Layout 
 15        }, 
 16    ] 
 17 },