路由、VueRouter的使用步骤
Vue 中路由：路径 和 组件 的映射关系，根据路由就能知道不同的路径应该匹配渲染哪个组件
VueRouter 作用：修改地址栏路径时，切换显示匹配的组件
VueRouter 的使用步骤：
1. 五个固定步骤：
① 下载 VueRouter 模块到当前工程，版本 3.6.5（Vue2 对应的版本是 VueRouter3.X，Vuex3.X；Vue3 对应的版本是 VueRouter4.X，Vuex4.X）
npm install vue-router@3.6.5
② 引入： import VueRouter from ' vue-router ' （ ② 到 ⑤ 全都在 main.js 里写 ）
③ 安装注册：Vue.use ( VueRouter )
④ 创建路由对象：const router = new VueRouter ()
⑤ 注入，将路由对象注入到 new Vue 实例中，建立关联：
new Vue ({
render : h => h (App) ,
router : router // 后面的 router 要和第④步创建的对象名一致
}) . $mount ( ' #app ' )
2. 两个核心步骤：
① 创建需要的组件（views 目录），main.js 里导入组件（例如 import Find from './views/Find.vue'），配置路由规则
② 配置导航，配置路由出口（路径匹配的组件显示的位置）
<div class = " footer_wrap ">
<a href = " #/find " > 发现音乐 </a>
<a href = " #/my " > 我的音乐 </a>
</div>
<div class =" top ">
<router-view> </router-view> // <router-view> </router-view> 用来控制组件所展示的位置
</div>
----------------------------------------------------------------------------------------------------------------
路由的封装抽离：
1. src 下新建 router 文件夹，里面新建 index.js 文件
2. 将 main.js 里跟路由相关的代码剪切到 index.js，额外导入一下 Vue：import Vue from 'vue'
3. index.js 文件的末尾再把 router 路由对象导出，因为要在 main.js 里使用（export default router）
4. main.js 里再导入一下：import router from ' ./router/index.js '
