路由模块封装#

以我的音乐应用为例
所有的路由配置都放在main.js中是不合适的
最好将路由模块抽离出来，拆分模块，利于维护
将路由相关部分代码抽出来放到router/index.js中，用export default router导出，在main.js中用import导入使用
tips:拆分路由模块后，原本由路由管理的组件路径需要修改，为了避免目录层级问题，建议使用绝对路径导入组件，vue 中使用@指代src，例如：

import Find from '../views/Find.vue';
// 改为：
import Find from '@/views/Find';

完整代码：
src/router/index.js:

// 路由的使用步骤 5+2
// 5个基础步骤
// 2个核心步骤

// 1.1.下载v3.6.5
// 1.2.引入
import VueRouter from 'vue-router';

import Find from '@/views/Find';
import My from '@/views/My.vue';
import Friend from '@/views/Friend.vue';
// 补充Vue
import Vue from 'vue';
// 1.3.安装注册 Vue.use(插件)
Vue.use(VueRouter); // VueRouter插件初始化
// 1.4.创建路由对象
const router = new VueRouter({
    // 2.1.建组件，配规则
    // 每条route:{path:路径,component:组件}
    routes: [
        { path: '/find', component: Find },
        { path: '/my', component: My },
        { path: '/friend', component: Friend },
    ],
});
// 导出
export default router;

src/main.js:

import Vue from 'vue';
import App from './App.vue';
// 导入路由模块
import router from './router/index';

Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
    // 1.5.注入到new vue中，建立关联
    router: router,
}).$mount('#app');