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   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 },