之前是在created钩子函数里面，发现这是在今天当前页面之后了。先回顾一下钩子函数beforeEach const router = new VueRouter({}) router,beforeEach((to,from,next) =>{ const {auth = true } =meta // meta代表的是to中的meta对象 var isLogin = Boolean(state.state.user.id) // true 用户已登录，false 用户未登录 if(auth && !islogin && path !=='/login'){ return next({path:'/login'}) // 跳转到login页面 } next（） // 进行下一个钩子函数 }) 这个beforeEach的钩子函数，它是一个全局的before 钩子函数， （before each）意思是在 每次每一个路由改变的时候都得执行一遍。 组件内的钩子函数 ( beforeRouteEnter 和 beforeRouteLeave 再加一个watch)

1）最先执行的是 beforeEach钩子，所有路由开始的时候最先执行 2）然后就是router的配置中的beforeEnter. 3) 接下来就是 路由beforeARouteEnter -- 然后是组件自身的生命周期 -- 路由beforeRouteLeave beforeRouteEnter (to, from, next) {} 与 beforeRouteLeave不再是组件中route配置下的对象了，他们和data处于同级别的地位。 可以看出： 新设计的路由 淡化了组件自身跟着路由生命周期变化而变化，而是依赖组件自身的生命周期，只有两个简单的 路由级别的钩子 beforeRouteEnter beforeRouteLeave 那么接下来： 　　ajax调用时机：相对于组件来说的，而且应该是在路由进入之前开始准备的 所以beforeRouteEnter是调用ajax的时机。 实际项目中一般我是在created钩子函数中，上面说的没试过。 watch这一函数可以监听路由$route变化。beforeRouteLeave在组件的生命周期完成后，且旧路由即将切换走，新路由beforeEach的时机执行。 watch的使用时机： 当使用路由参数时，例如从 /user/foo 导航到 user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。 不过，这也意味着 组件的生命周期钩子不会再被调用。 复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch（监测变化） $route 对象：

参考原文：https://www.cnblogs.com/faith3/p/6224235.html

作者：人参，每篇随笔皆原创（除非注明原作者的随笔），欢迎指正！