路由懒加载

懒加载解决的问题：

避免进入首页就加载全部的前端资源造成用户等待时间过长的问题。
就好比，访问 login 页面，你返回的 js 路由不仅有渲染 login 页面的，还有渲染 production 页面以及其他页面的功能。而这些代码量太大了，文件也大。js 文件有个特征，下载完全了才会运行，导致页面首屏速度太慢了，也就是白屏时间太长。这个问题，早就有人发现，于是解决方案就是路由懒加载，这只是一个技术名词。

Vue路由懒加载原理说明

1. 我们一开始用ES6的写法，在路由文件router/index.js中引入所有路由要用到的组件，然后在每个路由对象中注册组件。使用这种方法时，我们加载路由文件时，首先要加载所有引入的路由组件，这样会影响页面的加载速度。现在我们通过懒加载的方式去改善这一问题，所以就延伸出了resolve这一概念；
2. 箭头指向的部分就是我们的改善方法。当用require这种方式引入的时候（ES5的写法），会将component分别打包成不同的js文件，加载的时候也是按需加载，只用访问这个路由网址时才会加载这个js；
3. 也是按需加载，只用访问这个路由网址时才会加载这个js；

使用：

//写法1：
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
//写法2：
component:resolve => require(['@/pages/task'],resolve)

webpackChunkName：在学习了webpack之后了解其做用，作用就是webpack在打包的时候，对异步引入的库代码（lodash）进行代码分割时（需要配置webpack的SplitChunkPlugin插件），为分割后的代码块取得名字。
Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

理论：

路由原理
通过改变 URL，在不重新请求页面的情况下，更新页面视图。
路由分为History模式和Hash模式 我们经常使用的是History模式 前端的URL必须和实际向后端发起请求的URL一致 如果后端缺少对路由处理，将返回404错误
Hash在浏览器中符号的“#”，以及#后面的字符称之为hash hash虽然出现在URL中，但不会被包括在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
监听hash值的改变，history模式监听路径的改变
给window绑定一个事件
路由传参：
三种：
分别是query，params，动态路由传参
接收：
通过query方式传递过来的参数一般是通过this.$route.query 接 收 通 过this.$routert.params方 式 传 递 过 来 的 参 数 一 般 是 通 过 t h i s . route.query接收 通过params方式传递过来的参数一般是通过this.route.query接收通过params方式传递过来的参数一般是通过this.route.params接收
通过动态路由传参方式传递过来的参数一般是通过this.$route.params接收
Router-link路由传参方式URL后面传参，通过斜线进行传参
路由守卫：
2. 路由守卫使用的方式有几种？ 全局的 单个路由独享的 组件级的
3. vue-router全局有三个守卫：
router.beforeEach 全局前置守卫 进入路由之前
router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用 router.afterEach 全局后置钩子 进入路由之后 没有next
组件内的守卫：
进组组件前的守卫 beforeRouteEnter 没有办法获取this，当前组件没有创建
路由更新时的守卫 beforeRouteUpdata(2.2新增)
离开组件时的守卫 beforeRouteLeave

路由守卫钩子函数里面的三个参数分别是什么？
to,from,next 这三个参数：
to和from是将要进入和将要离开的路由对象,路由对象指的是平时通过this.$route获取到的路由对象。
next:Function 这个参数是个函数，且必须调用，否则不能进入路由(页面空白)。
next() 进入该路由。
next(false): 取消进入路由，url地址重置为from路由地址(也就是将要离开的路由地址)。 next 跳转新路由，当前的导航被中断，重新开始一个新的导航。
路由跳转方式 一共四种方式

router-link (不带参数)
this.$router.push() (函数里面调用)
this.$router.replace() (用法同push)
this.$router.go(n)go返回几级页面（正数是往前跳转页面，负数是往后跳转页面）

引入项目，在项目里面怎么使用（后台管理，token，白名单）