vue步步深入（四）项目编写，路由配置

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
    }
  ]
})