vue路由配置

首先在router/index.js中配置路由文件

import引入跳转的页面，然后配置path，component（注意不是components）等；

import Vue from 'vue'
import Router from 'vue-router'
//以下引入四个文件就是跳转的页面
import Rank from 'components/rank/rank'
import Recommend from 'components/recommend/recommend'
import Search from 'components/search/search'
import Singer from 'components/singer/singer' 


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/rank',
      component: Rank
    },
    {
      path: '/recommend',
      component: Recommend
    },
    {
      path: '/search',
      component: Search
    },
    {
      path: '/singer',
      component: Singer
    }
  ]
})

在main.js引入route

import router from './router'

new Vue({

el: '#app',

router,//注意在这里加上router

render: h => h(App)

})

根据标签跳转到相应的页面，根据router-link标签链接到对应的页面，然后设置to为跳转的页面

下面是tab.vue的代码

<template>
    <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>
</template>

<script>
export default {
    name: 'Tab'
}
</script>

<style lang="stylus" scoped>
@import "~common/stylus/variable"
  .tab
    display: flex
    height: 30px
    line-height: 30px
    font-size: $font-size-medium
    margin-bottom: 5px
    .tab-item
      flex: 1
      text-align: center
      .tab-link
        padding-bottom: 5px
        color: $color-text-l
      &.router-link-active
        .tab-link
          color: $color-theme
          border-bottom: 2px solid $color-theme
</style>

到此整个路由的配置就结束了

效果图

最后补充一点，若想进入页面默认显示推荐

在index.js中加redirect