1.在App.vue頁面寫需要的組件
<template>
<div id="app"><!--這個到時候會替換掉index.html的#app的DOM元素-->
<m-header></m-header>
<tab></tab>
<router-view></router-view>
</div>
</template>
<script type="text/ecmascript-6">
import MHeader from './components/m-header/m-header'
import Tab from './components/tab/tab'
export default {
components: {
MHeader,
Tab
}
}
</script>
<style scoped lang="stylus">
</style>
並在‘src’->‘components’文件夾新建對應的 組件 文件夾
再在‘common’文件夾放入自己項目的公共樣式,字體,圖片等
2.編寫"m-header.vue"頁面,即"m-header"組件
<template>
<div class="m-header">
<div class="icon"></div>
<h1 class="text">Apple Music</h1>
<router-link class="mine">
<i class="icon-mine"></i>
</router-link>
</div>
</template>
<script>
export default {}
</script>
<style scoped lang="stylus">
@import "~common/stylus/variable";
@import "~common/stylus/mixin"
</style>
3.在‘components’裏新建文件,實現tab點擊後對應顯示的組件模塊,如下
4.編寫‘tab’欄,在‘tab.vue’頁面編寫
<template>
<div class="tab">
<router-link class="tab-item" to="/recommend">
<span class="tab-link">推薦</span>
</router-link>
<router-link class="tab-item" to="/singer">
<span class="tab-link">歌手</span>
</router-link>
<router-link class="tab-item" to="/rank">
<span class="tab-link">排行</span>
</router-link>
<router-link class="tab-item" to="/search">
<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"
</style>
4.再配置路由,路由配置的頁面寫在'router'=>index.js頁面
在main.js頁面引入“router”裏面的index.js頁面,引入路徑只寫到‘./router’會默認爲引入‘router’文件裏的index.js頁面,再在new Vue寫router
“router”=>index.js寫法如下:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Recommend from "components/recommend/recommend"
import Singer from "components/singer/singer"
import Rank from "components/rank/rank"
import Search from "components/search/search"
Vue.use(VueRouter)
export default new VueRouter({
routes:[
{
path:'/',
redirect:"/recommend" //默認重定向爲recommend點擊狀態
},{
path:"/recommend",
component:Recommend
},{
path:"/singer",
component:Singer
},{
path:"/rank",
component:Rank
},{
path:"/search",
component:Search
}
]
})