VUE移動端音樂APP學習【二】：頁面骨架開發

頁面骨架

頁面的骨架分爲三塊區域: header(頭部標題)、tab(切換按鈕)、router-view(路由切換的容器)

在app.vue中：

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

<script>
import MHeader from './components/m-header/m-header';
import Tab from './components/tab/tab';

export default {
  components: {
    MHeader,
    Tab,
  },
};

</script>

 配置路由

在router/index.js中進行路由配置：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Recommend from '../components/recommend/recommend';
import Search from '../components/search/search';
import Singer from '../components/singer/singer';
import Rank from '../components/rank/rank';

Vue.use(VueRouter);

const routes = [
  {
    path: '/recommend',
    name: 'Recommend',
    component: Recommend,
  }, {
    path: '/search',
    name: 'Search',
    component: Search,
  }, {
    path: '/singer',
    name: 'Singer',
    component: Singer,
  }, {
    path: '/rank',
    name: 'Rank',
    component: Rank,

  },

];

const router = new VueRouter({
  routes,
});

export default router;

配置默認路由:

{
    path: '/',
    redirect: '/recommend',
  },

實現導航欄組件

tag.vue:

<template>
  <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>
</template>

<script>
export default {
  name: 'tab',
};

</script>
<style lang="scss">
.tab {
  display: flex;
  height: 44px;
  line-height: 44px;
  font-size: $font-size-medium;

  .tab-item {
    flex: 1;
    text-align: center;

    .tab-link {
      padding-bottom: 5px;
      color: $color-text-l;
    }

    &.router-link-active {
      .tab-link {
        color: $color-theme;
        border-bottom: 2px solid $color-theme;
      }
    }
  }
}
</style>

其中

 &.router-link-active 實現當前的路由對應的按鈕的高亮效果

首頁效果圖