好久没有写日报了，希望写日报的习惯能够再次坚持下来，
今天完成的事情：
学习vue，跟着视频做一个音乐APP，
今天完成tab.vue组件（导航栏），
使用vue-router做路由，css样式用flex布局，to指向的路径在router/index.js里配置
<template>
<!-- tab组件下，通过路由router引入四个组件recommend、singer、rank、search组件 -->
<div class="tab">
<router-link tag="div" to="/recommend" class="tab-item">
<span class="tab-link">推荐</span>
</router-link>
<router-link tag="div" to="/singer" class="tab-item">
<span class="tab-link">歌手</span>
</router-link>
<router-link tag="div" to="/rank" class="tab-item">
<span class="tab-link">排行</span>
</router-link>
<router-link tag="div" to="/search" class="tab-item">
<span class="tab-link">搜索</span>
</router-link>
</div>
</template>
<script type="text/ecmascript-6">
export default {}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable'
.tab
display flex
height 44px
line-height 44px
font-size $font-size-medium // 14px字体大小
.tab-item
flex 1
text-align center
&.router-link-active // 全局配置 <router-link> 的默认“激活 class 类名
.tab-link
color $color-theme
border-bottom 2px solid $color-theme
.tab-link
padding-bottom 5px
color $color-text-l // 灰色
在main.js全局注册vue-router
import 'babel-polyfill' // 写在最前，补丁
import Vue from 'vue'
import App from './App'
import router from './router' // 这个router是 router目录下的index.js文件 export default出来的路由实例(new Router)
import fastclick from 'fastclick' // 移动端点击，延迟300毫秒
import 'common/stylus/index.styl' // 在webpack.base文件里配置相对路径
fastclick.attach(document.body) // 推荐用法，body下的按钮div都没有300毫秒点击延迟
/* eslint-disable no-new */
new Vue({
el: '#app',
router, // 挂载路由router实例
render: h => h(App)
})
在router/index.js里配置路由信息，path对应<router-link tag="div" to="/recommend" class="tab-item">里的to
import Vue from 'vue'
import Router from 'vue-router'
import recommend from 'components/recommend/recommend' // 引入recommend组件
import singer from 'components/singer/singer'
import rank from 'components/rank/rank'
import search from 'components/search/search'
Vue.use(Router) // 注册路由
export default new Router({ // 导出路由实例
routes: [ // 路由配置选项
{
path: '/', // 根的router，刚进入页面
redirect: '/recommend' // 默认跳到这个页面
},
{
path: '/recommend', // 路由to对应的路径
component: recommend // 路由到对应的组件
},
{
path: '/singer',
component: singer
},
{
path: '/rank',
component: rank
},
{
path: '/search',
component: search
}
]
})
路由出口在<router-view></router-view>
<template>
<div id="app">
<!-- 使用头部组件 -->
<m-header></m-header>
<tab></tab>
<!-- 路由出口 -->
<router-view></router-view>
</div>
</template>
明天计划的事情：继续音乐APP的跟写，做推荐页面，抓取线上qq音乐的数据
遇到的问题：暂无
收获：掌握vue-router
返回列表
评论