vue router钩子函数

至臻

1、全局的钩子beforeEach（to，from，next）

• 页面加载之前
• 页面跳转之前权限认证，访问拦截
  

afterEach（to，from，next）

• 页面加载之后
  

2、组建内的导航钩子beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave,直接在路由组件内部进行定义的
beforeRouteEnter(to, from, next)

• 在渲染该组件的对应路由被 confirm 前调用,
• 因为当钩子执行前，组件实例还没被创建,不能获取组件实例‘this’
  

beforeRouteUpdate (to, from, next)

• 在当前路由改变，但是该组件被复用时调用，即原路由带有动态参数，例如：／detail/:id,id值改变，即路由改变，但原本组件被复用；
• 访问组件实例 this
  

beforeRouteLeave (to, from, next)

• 导航离开该组件的对应路由时调用
• 可以访问组件实例 this
• 用途：清除当前组件中的定时器，避免占用内存；当页面中有未关闭的窗口, 或未保存的内容时, 阻止页面跳转；保存相关内容到Vuex中或Session中
  

3、路由内的导航钩子

const router = new VueRouter({
routes: [
{
path: '/detail',
component: detail,
beforeEnter: (to, from, next) => {
// ...
}
}
]