## 3. 路由配置
> Vue Router官方文檔 https://router.vuejs.org/zh/
>
> 前端路由原理：https://segmentfault.com/a/1190000018219705
### 3.1 最簡配置
> 路由的配置文件在router/index.js文件中
>
> 先引入文件，再進行配置
首先在`views目錄中新建以下頁面`，主頁(Home/Home.vue),登錄頁(Login/Login.vue),測試頁(Test/Test.vue)
然后配置下路由
```js
import Vue from 'vue'
import Router from 'vue-router'
//@表示 src目錄 webpack的配置在webpack.base.conf.js第29行 alias{'@':resolve('src')}
import Home from '@/views/Home/Home.vue'
import Login from '@/views/Login/Login.vue'
import Test from '@/views/Test/Test.vue'
Vue.use(Router)
export default new Router({
routes: [//路由規則
{
path: '/',
name: 'Home',
component: Home
},
{
path:'/login',
name:'Login',
component:Login
},
{
path:'/test',
name:'Test',
component:Test
}
]
})
```
路由規則在`routes`中進行配置,`routes`是一個數組，接受一系列路由規則，每個路由規則是一個對象，包括路徑、路由名字，和路徑匹配的組件，建議給每個路由加個名字，在后面可能會用到。
打開瀏覽器，輸入相應的url查看配置的路由是否正確,不正確的話檢查下自己的配置
### 3.2配置路由懶加載
> 參考文檔：
>
> 路由懶加載官方文檔：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
>
> webpack之mainfest解讀：https://github.com/younth/blog/issues/3
當打包構建應用時，Javascript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。所以，懶加載的含義是當路由被訪問時再去加載對應的js代碼。
首先，不做路由懶加載的情況下，我們打包一下（切換到項目目錄，執行`npm run build`）,然后會發現項目下生產了3個js文件
簡單介紹一下作用：
1. vendor.js 第三方庫，一般是 node_modules里面的依賴進行打包 體積最大
2. app.js 入口js打包的結果，即我們編寫的所有代碼都會打包進去
3. manifest.js 主要是一些異步加載的實現方法（通過建立script方式動態引入js），內容上包含異步js的文件名和路徑。
然后我們實現一下路由懶加載 `@/router/router.js`
```js
import Vue from 'vue'
import Router from 'vue-router'
// import Home from '@/views/Home/Home.vue'
// import Login from '@/views/Login/Login.vue'
// import Test from '@/views/Test/Test.vue'
// 懶加載方式
const Home=()=>import('@/views/Home/Home.vue')
const Login=()=>import('@/views/Login/Login.vue')
const Test=()=>import('@/views/Test/Test.vue')
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path:'/login',
name:'Login',
component:Login
},
{
path:'/test',
name:'Test',
component:Test
}
]
})
```
懶加載只是改變了一下組件的引用方式，由原來的直接引入變成異步引入，當我們訪問對應的路由path時，才會加載相應的路由組件。
配置完成后再執行一次打包，結果如下：
我們會發現目錄中多出來3個js文件,并且`app.js`文件變小了。這說明配置了懶加載之后，app.js中其他組件的內容被抽離出來，分配到各自的js文件中。配置懶加載之后，剛開始打開頁面只會加載app.js文件，只有在用戶點擊相應路由時，才會加載對應的js代碼。當我們的業務代碼非常多時，懶加載是個很好的選擇。
### 3.3 配置history模式
> 官方文檔：https://router.vuejs.org/zh/guide/essentials/history-mode.html
配置history模式有兩個原因，一是因為hash模式看很丑，二是因為預加載要用到History模式，配置非常簡單,只需要配置屬性`mode`的值為'history'
```js
const router = new VueRouter({
mode: 'history',
routes: [...]
})
```
不過這種方式需要后臺的支持，當匹配不到url時，返回url/index.html頁面
nginx配置如下
```js
location / {
try_files $uri /index.html;
}
```
