vue.js音乐播放器二:router-link页面内容以及引入

1:下面是router-link的目录结构:

router-link.png

2:下面是在router文件夹下的index.js中配置各个组件

import Vue from 'vue'
import Router from 'vue-router'
import Recommend from 'components/recommend/recommend'
import Rank from 'components/rank/rank'
import Singer from 'components/singer/singer'
import Search from 'components/search/search'

Vue.use(Router)

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

3:下面是在app.vue中引入这个router-link,其中router- view就表示显示对应的内容区域

app-router-link.png