vue移動音樂app開發筆記 二. 搭建項目骨架,配置路由與開發首頁界面

修改App.vue

我們常在開發中碰到這個問題:設計師給我的圖紙是一個界面佔滿整個屏幕,但是我們的界面總是能左右稍微滑動一點
我們可以在app.vue中添加以下的css代碼即可解決該問題

#app {
  touch-action:none;
  touch-action:pan-y;
}

項目目錄

開發首頁界面

設計圖

結構很簡單,上面的頭部內容不變,下部的內容隨着用戶點擊導航條而改變

構建首頁骨架

在pages中新建一個index的文件夾,首頁界面下部內容主要分4個,所以我們在components中新建4個vue組件,再新建一個head組件用以構建首頁界面上部不變的部分

在首頁界面中,我們用head組件存放不變的部分,下方放置一個router-view用以存放首頁下半部分變化的內容

編寫head組件

<template>
  <div class="wrapper">
    <div class = "logo">
      <img src="./tomato.png" alt="">
      <span>Tomota Music</span>
    </div>
    <ul class='nav'>
     <router-link tag = "li" to = "/rank"> <span>排行</span> </router-link>
     <router-link tag = "li" to = "/recommend"> <span>推薦</span> </router-link>
     <router-link tag = "li" to = "/search"> <span>搜索</span> </router-link>
     <router-link tag = "li" to = "/singer"> <span>歌手</span> </router-link>
    </ul>
  </div>

</template>

<script>
export default {
  components: {},
  data () {
    return {
    }
  },
  methods: {},
  created () {},
  mounted () {}
}
</script>

<style lang = "less" scoped>
  .wrapper{
    background-color: @bgColor;
    .logo{
      display: flex;
      justify-content: center;
      align-items: center;
      color: @font-color-theme;
      line-height: .88rem;
      font-size: @font-size-large;
      img{
        height: 30px;
        margin-right: 5px;
      }
    }
    .nav{
      display: flex;
      justify-content: space-around;
      height: .8rem;
      line-height: .8rem;
      color: #676767;
    }
    .active-link{
      color: @font-color-theme;
      &:after{
        display: block;
        content: "";
        height: 2px;
        width: 90%;
        margin: 0 auto;
        background-color: @font-color-theme;
        transform: translateY(-8px);
      }
    }
  }
</style>

編寫具體內容組件

修改路由文件

配置嵌套路由

因爲我們在首頁界面中很清晰的看到,在index界面中嵌套了rank,recommend等組件,
我們根據路由來決定展示那個組件,所以我們需要按下圖來配置路由文件

配置默認路由

例如,當我們跳轉至"/“路徑時,我們希望轉發至”/index"路徑,從而展示首頁界面時,可以如下配置

redirect () {
  return '/index'
}

配置路由高亮

我們要實現下圖的效果,實現當前的路由對應的按鈕的高亮效果,
我們可以看到vue自動給該按鈕添加了一個class名,
而添加的這個class名我們可以通過配置路由文件,進行自定義

Vue.use(Router)

export default new Router({
  linkActiveClass: '自定義的高亮class名',

路由文件完整代碼

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/pages/Index/Index'
import Rank from '@/pages/Index/components/Rank'
import Recommend from '@/pages/Index/components/Recommend'
import Search from '@/pages/Index/components/Search'
import Singer from '@/pages/Index/components/Singer'

Vue.use(Router)

export default new Router({
  linkActiveClass: 'active-link',
  routes: [
    {
      path: '/',
      redirect () {
        return '/index'
      }
    },
    {
      path: '/index',
      name: 'Index',
      component: Index,
      children: [
        {
          path: '/',
          redirect () {
            return '/rank'
          }
        },
        {
          path: '/rank',
          name: 'Rank',
          component: Rank
        },
        {
          path: '/recommend',
          name: 'Recommend',
          component: Recommend
        },
        {
          path: '/search',
          name: 'Search',
          component: Search
        },
        {
          path: '/singer',
          name: 'Singer',
          component: Singer
        }
      ]
    }
  ]
})

首頁效果圖