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
        }
      ]
    }
  ]
})

首页效果图