第3章 頁面骨架開發

內容均爲《Vue2.0開發企業級移動端音樂Web App 》學習筆記javascript

包括頁面入口、header 組件的編寫、路由配置及頂導 tab 組件開發。css

需求分析

  • m-header組件 首先咱們看到的是推薦頁。咱們點擊推薦,歌手,排行,搜索的時候,標題部分和用戶按鈕是不變的,因此在這裏咱們先拆分出來一個組件 m-headerhtml

  • tab組件 當咱們點擊推薦歌手,排行和搜索的。頁面tab如下的展現各自相應的頁面,同時路由頁相應的變化。vue

路由配置

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>
複製代碼

記得寫當點擊切換的時候,選中的樣式java

.router-link-active
    .tab-link
      color: $color-theme
      border-bottom: 2px solid $color-theme
複製代碼

router-viewgit

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

複製代碼

githubgithub

相關文章
相關標籤/搜索