第3章 页面骨架开发

第3章 页面骨架开发

包括页面入口、header 组件的编写、路由配置及顶导 tab 组件开发。

需求分析

• m-header组件
  首先我们看到的是推荐页。我们点击推荐，歌手，排行，搜索的时候，标题部分和用户按钮是不变的，所以在这里我们先拆分出来一个组件 m-header

• tab组件
  当我们点击推荐歌手，排行和搜索的。页面tab以下的展示各自相应的页面，同时路由页相应的变化。

路由配置

routes: [
    {
      path:'/recommend',
      component:recommend,
      name:'推荐'
    },
    {
      path:'/singer',
      component:singer,
      name:'歌手'
    },
    {
      path:'/rank',
      component:rank,
      name:'排行'
    },
    {
      path:'/search',
      component:search,
      name:'搜索'
    },
    {
      redirect:'/recommend',
      path:'/'
    }
  ]

tab 组件开发。router-link to

<div class="tab">
    <router-link tag="div" class="tab-item" to="/recommend">
      <span class="tab-link">推荐</span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/singer">
      <span class="tab-link">歌手</span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/rank">
      <span class="tab-link">排行
      </span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/search">
      <span class="tab-link">搜索</span>
    </router-link>
  </div>

记得写当点击切换的时候，选中的样式

 .router-link-active
    .tab-link
      color: $color-theme
      border-bottom: 2px solid $color-theme

router-view

 <div id="app">
    <m-header></m-header>
    <tab></tab>
    <router-view></router-view>
  </div>

github