核心步骤：

1. 配置路由规则(router/index.js)

// 1. 导入所需模块
import Vue from 'vue'
import VueRouter from 'vue-router'
import DisCover from '@/views/DisCover.vue'
import MyMusic from '@/views/MyMusic.vue'
import Follow from '@/views/Follow.vue'
import Recommend from '@/views/Recommend.vue'
import TopList from '@/views/TopList.vue'
import ArtList from '@/views/ArtList.vue'
// 2. 调用 Vue.use() 函数，将 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)
// 3.配置路由规则
const routes = [
  // 直接写到这个数组中的路由规则，级别最大。叫做一级路由
  // 一级路由只能展示在App.vue中，所以<router-view/>只能放到App.vue中
  {path:'/discover', component: DisCover,children:[
    // 二级路由的path，可以不写/
    // 二级路由的访问地址会和一级地址拼接
    // 比如访问推荐地址是: /discover/tuijian 
    {path:'tuijian', component: Recommend},
    {path:'toplist', component: TopList},
    {path:'artlist', component: ArtList},
  ]},
  {path:'/mymusic', component: MyMusic},
  {path:'/follow', component: Follow},
]
// 4. 创建路由的实例对象
const router = new VueRouter({
  // 路由的配置
  routes
})
// 5. 导出路由的实例对象
export default router

2. 设置路由出口(router-view/)和设置超链接(<router-link to"/discover/tuijian">)

<template>
  <div class="box">
    <!-- 发现音乐 -->
    <div class="link">
      <router-link to="/discover/tuijian">推荐</router-link>
      <router-link to="/discover/toplist">排行榜</router-link>
      <router-link to="/discover/artlist">歌手</router-link>
    </div>
    <div class="content">
      <!-- 下面的router-view，用于展示、推荐、排行榜、歌手组件 -->
      <router-view></router-view>
    </div>
  </div>
</template>