vue中使用vue-router

1. 新建vue项目，在src目录下新建router文件夹并在其中新建index.js，引入vue和vue-router

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

1. 设计跳转链接

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

1. 在vue页面中使用

//main.js
import router from './router'
new Vue({
  el: '#app',
  render: h => h(App),
  router
})

//app.vue
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

< router-view >< /router-view>负责嵌套路由，将路由中的组件嵌套至页面中，具体文档