页面结构复杂时如何拆解vue模块？

在实际写页面的时候，如果一个页面的结构比较复杂，那么我们着一个页面的前端代码的量就会很大，那么我们如何拆解一个页面呢？

我们还是以简书的首页为例

我们可以看到这个主页可以划分为很多个模块，那么我们如何拆解和使用呢？
我们以导航栏为例，将导航栏抽取出来

• 首先我们创建header.vue模块

  
  image.png
• 在Header.vue中添加导航栏的代码

<template>
  <b-navbar toggleable="md" type="light" variant="default" fixed class="box">
    <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
    <router-link to="/">
      <b-navbar-brand>
        <b-img width="85" height="50"
               src="https://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png"/>
      </b-navbar-brand>
    </router-link>

    <b-collapse is-nav id="nav_collapse">
      <b-navbar-nav>

        <b-nav-item v-if="token!=null">
          <router-link to="/">发现</router-link>
        </b-nav-item>


        <b-nav-item v-if="token!=null">
          <router-link to="/subscriptions">关注</router-link>
        </b-nav-item >

        <b-nav-item v-if="token!=null">
          <router-link to="/notifications">消息</router-link>
        </b-nav-item>

        <b-nav-item v-if="token==null">
          <router-link to="/index">首页</router-link>
        </b-nav-item >

        <b-nav-item v-if="token==null">
          <router-link to="/notifications">下载App</router-link>
        </b-nav-item>



        <b-nav-form>
          <b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
          <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
        </b-nav-form>
      </b-navbar-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-item href="#">Aa</b-nav-item>
        <b-nav-item-dropdown right>
          <!-- Using button-content slot -->
          <b-dropdown-item>
            <router-link to="/u">
              个人中心
            </router-link>
          </b-dropdown-item>
          <template slot="button-content" v-if="token!=null">
            <b-img rounded="circle" width="35" height="35" src="../../static/img/avatar12.jpeg"/>

          </template>
          <b-dropdown-item href="#">设置</b-dropdown-item>

            <b-dropdown-item> <router-link to="/login">退出</router-link></b-dropdown-item>


        </b-nav-item-dropdown>
        <a class="btn write-btn" href="/write">
          写文章
        </a>
      </b-navbar-nav>

    </b-collapse>
  </b-navbar>
</template>
<script>
  import 'bootstrap/dist/css/bootstrap.css'
  import 'jquery/dist/jquery.min'
  import 'bootstrap/dist/js/bootstrap.min'

  export default {
    data() {
      return {
        name: 'taoranran',
        token: "123"
      }
    },
    computed: {
      username() {
        let username = localStorage.getItem('ms_username');
        return username ? username : this.name;
      }
    },
    methods: {
      // 用户名下拉菜单选择事件
      handleCommand(command) {
        if (command == 'loginout') {
          localStorage.removeItem('ms_username')
          this.$router.push('/login');
        }
      }

    }
  }
</script>
<style scoped>
  .box {
    border-bottom: 1px solid #eef1f6;
    height: 55px;
  }

  a {
    color: #324157;
  }

  .btn {

  }

  .write-btn {
    float: right;
    width: 100px;
    height: 40px;
    line-height: 24px;
    margin: 8px 15px 0;
    border-radius: 20px;
    font-size: 15px;
    color: #fff;
    background-color: #ea6f5a;
  }
</style>

• 那么我们如何将它添加到主页中去呢？
  1 .我们在Home.vue的Script中引入Header.vue

  
  image.png
  

  其中v-head可以自定义

2. 然后在template中引入

   
   image.png
   

   3.效果

   
   image.png

其他的模块也是以此类推，希望小编写的能对你有所帮助哦