vue全局钩子函数(beforeEach/afterEach)

责编:menVScode 2017-12-06 17:59 阅读(1745)

导航钩子函数

        导航发生变化时,导航钩子主要用来拦截导航,让它完成跳转或者取消。

执行钩子函数位置

        router全局

        单个路由

        组件中

钩子函数

        router 实例上:beforeEach、afterEach

        单个路由中:beforeEnter

        组件内的钩子:beforRouteEnter、beforeRouteUpdate、beforeRouteLeave

钩子函数接受的参数

        to:要进入的目标路由对象    到哪里去

        from:正要离开导航的路由对象    从哪里来

        next:用来决定跳转或者取消导航


router 实例上:beforeEach、afterEach,进入每个导航的时候执行函数,这两个是全局的钩子的函数。

let router = new VueRouter({
  mode:'history',//默认是hash模式
  linkActiveClass:'menvscode-active',
  scrollBehavior(to,from,savePosition){ // 在点击浏览器的“前进/后退”,或者切换导航的时候触发。
    //console.log(to) // to:要进入的目标路由对象,到哪里去
    //console.log(from) // from:离开的路由对象,哪里来
    //console.log(savePosition) // savePosition:会记录滚动条的坐标,点击前进/后退的时候记录值{x:?,y:?}
    /*if(savePosition) { return savePosition; }else{ return {x:0,y:0} }*/
    if(to.hash){ //先判断目标路由有没有hash值
      return {selector:to.hash}
    }
  },
  routes:[
    {
      path:'/',
      name:'index',
      component:Home,
      meta:{ index:0,title:'home' }
    },
    {
      path:'/document',
      name:'Document',
      meta:{ index:1,login:true,title:'document' },
      components:{ // 多个视图的时候,默认渲染default的视图。
        default:Document,
        slider:Slider,
        home:Home
      }
    },
    {
      path:'/user/:tip?/:userId?',//?正则符号:userId/tip可以出现0次或者1次。这样就能匹配/user/vip/1或者/user
      name:'user',
      component:User,
      meta:{ index:1,title:'user' }
    },
    {
      path:'/about',
      component:About,
      // meta:{ index:2 },
      children:[
        {
          path:'',//写''空值,代表默认子路由,相对于“/about”
          name:'About',
          component:Study,
          meta:{ index:2,title:'About' },
        },
        {
          path:'/work',
          name:'Work',
          component:Work
        },
        {
          path:'/hobby',
          name:'Hobby',
          component:Hobby
        }
      ]
    }
  ]
})

router.beforeEach((to,from,next)=>{
  console.log('beforeEach')
  // next()
  // next(false) //取消导航
  if(to.meta.login){ //重定向
    next('/login')
  }else{
    next()
  }
})

router.afterEach((to,from)=>{
  if(to.meta.title){
    window.document.title = to.meta.title;//不加window访问不到title
  }else{
    window.document.title = 'MVC前端网-menvscode.com'
  }

})

        如果不需要全局设置,那么需要在单个路由内设置。

{
    path:'/user/:tip?/:userId?',//?正则符号:userId/tip可以出现0次或者1次。这样就能匹配/user/vip/1或者/user
    name:'user',
    component:User,
    beforeEnter(to,from,next){
        console.log('beforeEnter');
        next()
    },
    meta:{ index:1,title:'user' }
},


前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码