导航 路由正在发生改变
真实的项目中需要判断权限或者登录状态决定用户能访问的路由，但是因为路由是在浏览器地址栏中的，用户可以输入，如果不加以拦截就可以看到本不该看到的页面；为了避免这种情况，我们需要使用导航守卫，在路由发生变化时作出相应的判断，判断用户是否可以去到他想去往的页面的路由；
let router = new VueRouter({....})
全局前置守卫 一个路由发生变化时 就会触发该函数
router.beforeEach((to,from,next)=>{....})
- to 路由对象 即将进入的页面的路由信息
- from 路由对象 当前正要离开页面路由信息
- next 函数 交出控制权或中断导航 next() 交出控制权 执行下面的功能 next(false) 中断当前导航 若url改变了 将会退到当前页面 next('/') 跳转到另一个路由 next可以接收和$router.push()一样的参数 当使用导航守卫时，无论是否通过验证，都要调用 next 方法，如果通过校验则执行 next() ，不通过则重定向或者中断；如果不调用，那么整个路由变化处于挂起状态，无法渲染任何组件；
路由独享守卫 在路由配置上直接定义beforeEnter守卫 也有三个参数 跟上面相同 在进入该路由组件之前会调用该钩子 在钩子中进行校验 如果校验通过，则执行 next()，只有执行 next，才能渲染该路由对应的组件
组件内守卫
- beforeRouteEnter 在渲染该组件的对应路由前调用，该钩子中不能访问this，因为实例还未创建
- beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用，适用于动态路由的参数发生变化时
- beforeRouteLeave 导航离开该组件的对应路由时调用，即要从当前页面去往其他页面时调用，可以用来做保存拦截，例如提示用户信息尚未保存等；
用webpack 配置vue的单页面的应用
安装插件
在项目中 VUE 结合 webpack使用 webpack 可以更方便的实现模块化，导入导出依赖。而且使用 webpack 配合 vue-loader，我们的组件可以写成 .vue 的文件。
npm install vue-loader vue-template-compiler --save-dev
// 使用 vue-loader 需要： // 1. 安装 vue-template-compiler // 2. 使用 VueLoaderPlugin
let HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
