問題：所有的路由配置都在main.js中合適嗎？

目標：將路由模塊抽離出來。 好處：拆分模塊，利于維護

路徑簡寫：

腳手架環境下 @指代src目錄，可以用于快速引入組件

---

完整代碼

router/index.js

// 但是這里就遇到了一個麻煩，復制粘貼過來后，相對路徑就需要改，如果層級比較深就更麻煩了，此時我們就可以使用絕對路徑，在Vue中它允許你使用@標識符來代表絕對路徑，@代表的是當前的src目錄，將來直接基于 @ 指代src目錄，從src目錄出發找組件
// import Find from '../views/Find'
import Find from '@/views/Find'
import My from '@/views/My'
import Friend from '@/views/Friend'// 注意別忘記導Vue，因為下面用到了
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化// 創建了一個路由對象
const router = new VueRouter({// routes 路由規則們// route  一條路由規則 { path: 路徑, component: 組件 }routes: [{ path: '/find', component: Find },{ path: '/my', component: My },{ path: '/friend', component: Friend },]
})// 進行導出
export default router

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'Vue.config.productionTip = falsenew Vue({render: h => h(App),router
}).$mount('#app')