內容均爲《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:'/'
}
]
複製代碼
<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