【朋友亲测面试题】web前端开发

vue-router的钩子函数

路由钩子函数分为三种类型如下：

1. 全局钩子函数

主要包括beforeEach(全局前置守卫)和aftrEach(全局后置守卫)

beforeEach的钩子函数，它是一个全局的before 钩子函数，意思是在 每次每一个路由改变的时候都得执行一遍。

它的三个参数：

to: (Route路由对象) 即将要进入的目标 路由对象 to对象下面的属性： path params query hash fullPath matched name meta（在matched下，但是本例可以直接用）

from: (Route路由对象) 当前导航正要离开的路由

next: (Function函数) 一定要调用该方法来 resolve 这个钩子。 调用方法：next(参数或者空) ***必须调用

next(无参数的时候): 进行管道中的下一个钩子，如果走到最后一个钩子函数，那么 导航的状态就是 confirmed （确认的）

next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

应用场景：可进行一些页面跳转前处理，例如判断需要登录的页面进行拦截，做登录跳转！！

afterEach函数不用传next()函数
router.beforeEach 是页面加载之前，相反router.afterEach是页面加载之后
举例: 通过跳转后改变document.title
router.afterEach((to, from) => {
　　　　if( to.meta.title ){
　　　　　　window.document.title = to.meta.title //每个路由下title
　　　　}else{
　　　　　　window.document.title = ‘默认的title’
　　　　}
　　})

2.单个路由里面的钩子

主要用于写某个指定路由跳转时需要执行的逻辑

  {
   
                    path: '/dashboard',
                    component: resolve => require(['../components/page/Dashboard.vue'], resolve)