第3章 页面骨架开发

内容均为《Vue2.0开发企业级移动端音乐Web App 》学习笔记

包括页面入口、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