之前在做登陆页面时，需要判断权限或者登录状态决定用户能访问的路由，但是因为路由是在浏览器地址栏中的，为了避免用户可以输入，如果不加以拦截就可以看到本不该看到的页面，所以需要使用路由守卫，在路由发生变化时作出相应的判断，判断用户是否可以去到他想去往的页面的路由。

全局前置守卫

router.beforeEach ((to,from,next) => {....})

to 路由对象，即将进入的页面的路由信息from 路由对象，当前正要离开页面路由信息next 函数，交出控制权或者中断导航

next() 交出控制权，执行下面的功能

next(false) 中断当前导航，如果url改变了，将会回退到当前页面

next(’/’) 跳转到另一个路由，next可以接收和$router.push()一样的参数

当使用导航守卫时，无论是否通过验证，都要调用next方法，如果通过校验则执行next()

，不通过则重定向或者中断；如果不调用，那么整个路由变化处于挂起状态，无法渲染任何组件；

组件内守卫

export default {

template:`...`,

beforeRouteEnter (to,from,next) {

// 在渲染该组件的对应路由前调用

// 不！能！获取组件实例`this`

// 因为当守卫执行前，组件实例还没被创建

},

beforeRouteUpdate (to,from,next) {

// 在当前路由改变，但是该组件被复用时调用

// 举例来说，对于一个带有动态参数的路径/foo/:id，在/foo/1 和/foo/2 之间跳转的时候，

// 由于会渲染同样的组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

// 可以访问组件实例`this`

},

beforeRouteLeave (to,from,next) {

// 导航离开该组件的对应路由时调用

// 可以访问组件实例`this`

 }

}