## 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;
}
```
