[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') } ] ~~~