用Vue来实现音乐播放器（五）：路由配置+顶部导航栏组件开发

路由配置

在router文件夹下的index.js中配置路由

import Vue from 'vue'
import Router from 'vue-router'
//配置路由前先引入组件
import Recommend from '../components/recommend/recommend.vue'
import Singer from '../components/singer/singer.vue'
import Rank from '../components/rank/rank.vue'
import Search from '../components/search/search.vue'


//一定不要忘了注册路由！！！
Vue.use(Router)

export default new Router({

  //配置路由 给组件配置路由前要先引入组件
  routes: [//数组
    {
　　　//给根路径也配置路由
      path:'/',
      redirect:'/recommend'
    },
    {
      path: '/recommend',
      component:Recommend,
    },
    {
      path: '/singer',
      component:Singer,
    },
    {
      path: '/rank',
      component:Rank,
    },
    {
      path:'/search',
      component:Search
    }

    //注意点：对象里面是component 不要写错加了s
    //还有路径path前面要加上/
    //配置完路由以后，在main.js中引入

  ]
})

配置完路由之后再main.js中引入

import Vue from 'vue'
import App from './App'

//引入 router文件夹下的注册的路由
import router from './router'

Vue.config.productionTip = false

import './common/stylus/index.styl'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //使用路由  还要在App.vue组件中利用<router-view></router-view>将路由渲染出来
  router,
  render: h => h(App),
  
})

引入路由之后在App.vue中通过<router-view></router-view>将路由对应的页面渲染到App.vue组件上

<template>
  <div id="app">
    <m-header></m-header>
    <tab></tab>
    <!-- 渲染路由 -->
    <!-- 通过顶部导航栏来切换路由 -->
    <router-view></router-view>

  </div>
</template>

<script type="text/ecmascript-6">
  // 引入头部是类  所以首字母大写了 但是标签我们是可以小写的
  //本质上MHeader
  import MHeader from './components/m-header/m-header.vue'

  //引入导航栏
  import Tab from './components/tab/tab.vue'

  export default {
    components: {
      MHeader,
      Tab
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
</style>

切换路由  通过路径哈希值的变化  触发change事件 渲染不同的路由 此时需要一个tab.vue组件来切换路由

<template>
    <div class="tab">
        <!-- 通过router-link来切换路由 这样App.vue就可以渲染不同的路由页面了 -->
        <!-- tag 可以决定router-link最终以什么标签形式呈现 -->
        <!-- router-link默认为a标签 -->
        <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>
</template>

页面效果