内容均为《Vue2.0开发企业级移动端音乐Web App 》学习笔记
包括页面入口、header 组件的编写、路由配置及顶导 tab 组件开发。
需求分析
-
m-header组件 首先我们看到的是推荐页。我们点击推荐,歌手,排行,搜索的时候,标题部分和用户按钮是不变的,所以在这里我们先拆分出来一个组件 m-header
-
tab组件 当我们点击推荐歌手,排行和搜索的。页面tab以下的展示各自相应的页面,同时路由页相应的变化。
路由配置
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>
复制代码
记得写当点击切换的时候,选中的样式
.router-link-active
.tab-link
color: $color-theme
border-bottom: 2px solid $color-theme
复制代码
router-view
<div id="app">
<m-header></m-header>
<tab></tab>
<router-view></router-view>
</div>
复制代码