5-6 构建页面组件，连通公共组件

目标：

• 建立每个页面组件
• 连通面包屑
• 连通侧边栏
• 连通标签栏

一、建立每个页面的组件

1.1、目录结构：

...
-src
    -assets
    -common
        -Aside.vue
        -Header.vue
        -Table.vue
    -store
        -modules
            -table.js
        -index.js
    -views
        -Home  //存放home的页面
            -Home.vue
        -Other   //存放其他页面
            -PageOne.vue
            -pageTwo.vue
        -UserMange   //存放用户页面组件
            -UserMange.vue
        -VideoMange   //存放视频管理页面组件
            -VideoMange.vue
        Main.vue
    -App.vue
    -main.js
    -routes.js
....

组件模板如 Home.vue

<template>
    <div>
      home  <!--只是简单的写一下home目录-->
    </div>
</template>

<script>
    //js代码
</script>

<style scoped>
　　/*css代码*/
</style>

1.2、配置Main.vue

因为现实的页面要在 Main中显示，所以需要在Main.vue中设置占位符(<router-view>)

<template>
    <el-container style="height: 100%">
        ...
        <el-main>
          <!--路由跳转显示，必须先占位-->
          <router-view></router-view>
        </el-main>
        ....
</template>

<script>
  //js代码
</script>

<style scoped>
  /*css代码*/
</style>

显示内容如下：

1.3、路由设置

//懒加载
const Main = () => import('@/views/Main');
//公共组件加载
const Home = () => import('@/views/Home/Home');
const VideoMange = () => import('@/views/VideoMange/VideoMange');
const UserMange = () => import('@/views/UserMange/UserMange');
const PageOne = () => import('@/views/Other/PageOne');
const PageTwo = () => import('@/views/Other/PageTwo');


let routes = [
  {
    path: '/',
    component: Main,
    children: [ //因为其他组件都是在main组件里面，所以在main组件中二级路由
      {
        path:'/',
        name:'home',
        component: Home
      },
      {
        path:'/video',
        name:'video',
        component: VideoMange
      },
      {
        path:'/user',
        name:'user',
        component: UserMange
      },
      {
        path:'/page1',
        name:'page1',
        component: PageOne
      },
      {
        path:'/page2',
        name:'page2',
        component: PageTwo
      }
    ]
  }
];

export default routes;

二、连通面包屑

面包屑其实我们已经设置好了，因为我们之前在 Header.vue的组件中设置好路由跳转到我们对应的组件了。下面我们就看下 Header.vue代码

<template>
      ....
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="curent.path" v-if="curent">{{curent.label}}</el-breadcrumb-item>
      ....
</template>


<script>
    import { mapState } from 'vuex'
    export default {
      computed: mapState({   //获取当前页面的菜单url
          curent: state => state.tab.currentMenu
        })
    }
</script>

三、连通侧边栏

侧边连我们需要触发事件，@click="clickMenu(item)"，废话不多说，直接看 Aside.vue代码：

<template>
  <!--background-color自定义颜色-->
  ....
    <el-menu-item :index="item.path" v-for="item in noChildren" :key="item.path" @click="clickMenu(item)">
      ....
      .....
        <el-menu-item :index="subItem.path" v-for="(subItem,subIndex) in item.children" :key="subIndex" @click="clickMenu(subItem)">{{subItem.label}}</el-menu-item>
      ...
</template>

<script>
    export default {
        .....,
        methods: {
          clickMenu(item){
            this.$router.push({name: item.name});  //在选择菜单栏之前，先路由跳转到 对应的组件
            this.$store.commit('selectMenu',item)
          }
        }
    }
</script>

<style scoped>
  /*css代码*/
</style>

实现效果如下：

这边有一个报错，表示你重复click的时候的一个报错提示：

 这个报错是因为你的vue-router的版本过高导致的，你可以降低的你的vue-router的版本到 3.0

>npm install vue-router@3.0 -S

四、连通标签栏

其实标签栏跳转跟 侧边栏原理差不多，点击触发一个click时间，好啦，废话不多说了，直接看代码怎么实现的吧,Tab.vue代码实现如下：

<template>
  <div class="tabs">
      <!--@click=changeMenu(tag)触发click事件，实现路由跳转-->
      <el-tag :key="tag.name" size="small" v-for="tag in tags" :closable="tag.name !== 'home'" :disable-transitions="false" @close="handleClose(tag)"  @click=changeMenu(tag)>
        {{tag.label}}
      </el-tag>
  </div>

</template>

<script>
  import { mapState, mapMutations }   from 'vuex'
  export default {
    ....,
    methods: {
      ....,
      changeMenu(item){
        this.$router.push({name: item.name});
        this.$store.commit('selectMenu',item);
      }
    }
  }
</script>

<style scoped>
  /*css代码*/
</style>

实现效果如图：