路由的封装抽离

对路由的封装进行封装，方便main.js文件维护

首先：

我们需要再src文件夹中创建一个router文件夹，在里面在创建一个index.js文件夹。

---

然后：

我们再index.js文件夹中进行封装路由规则

import Find from '@/views/Find'
import My from '@/views/My'
import Friend from '@/views/Friend'

import Vue from 'vue'                 //得到构造函数Vue
import VueRouter from 'vue-router'   //得到构造函数VueRouter
Vue.use(VueRouter)  //VueRouter插件初始化

const router = new VueRouter({
  // 配置路由规则
  routes: [
    { path: '/find', component: Find},
    { path: '/my', component: My},
    { path: '/friend', component: Friend},
  ]
})

// 导出router配置
export default router

• 注意，在index.js文件夹中是没有Vue 和 VueRouter构造函数的。

• 这里我们就需要自己导入这两个构造函数

  1.导入Vue构造函数
  import Vue from 'vue'
  
  2.导入VueRouter构造函数
  import VueRouter from 'vue-router'
  

---

最后：

我们需要在main.js中导入实例对象 router

import router from './router/index'

new Vue({
  render: h => h(App),
  router  //简写 键是固定的，值可以自己创建
}).$mount('#app')

---

拓展：

在Vue中，文件夹和文件的嵌套让我们对文件路径的书写比较繁琐

我们官方给我们提供了一个绝对路径的符号，@

@： 就是根目录src @ === src （但是不能直接写src）

• 例如：

import App from '@/App.vue'

---