[TOC] >[success] # router文件夹说明 接下来会讲一下 **正常路由结构** ，以及 **封装好的路由结构**。 >[success] ## 正常路由 **创建项目初始化路由** 会在 **src文件夹** 下生成一个 **router.js** 文件。 **router.js** ~~~ import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ './views/About.vue') } ] }) ~~~ 这种只是 **简单的路由（搭建项目初始化自动生成的路由文件）** ，如果以后 **复杂** 起来会**难已维护**。 >[success] ## 封装路由 1. 在 **src目录** 下创建一个 **router文件夹** ，这里的思想是把 **routes数组** 拆分成一个 **单独的js文件**，这样看着简洁也**方便维护**。  2. **router文件夹** **index.js** ~~~ import Vue from 'vue' import Router from 'vue-router' import routes from './router' Vue.use(Router) export default new Router({ routes // 这里使用ES6的简写写法，正常应该是这样写'routes : routes ' }) ~~~ **router.js** ~~~ import Home from '@/views/Home' export default [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue') } ] ~~~