Vue之路由里的钩子函数

• 在router.js里定义钩子函数

在router.js里添加beforeEnter和beforeLeave这两个钩子函数，beforeEnter这个钩子函数需要添加next（）；不然页面不能进行跳转；beforeLeave钩子函数在router.js是失效的，需要在组件里定义：
钩子函数的三个参数：

to:router即将进入的路由对象
from:当前导航即将离开的路由
next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；
否则为false，终止导航。

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Error from './views/Error.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: "/",
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
      beforeEnter: (to,from,next) => {
        console.log(to);
        console.log(from);
        console.log(next);
        // 闸门的作用 不加的话，页面不能进行调整 false：关 true：开
        //next() ：开
        next(true)
      }, 
       beforeLeave: (to,from,next) => {
        console.log(to);
        console.log(from);
        console.log(next);
        next(false)
      }, 
    },
    {
      path: '*',
      name: 'error',
      component: Error
    },
  ]
})

• 在组件里定义钩子函数，添加beforeRouteEnter和beforeRouteLeave两个钩子函数

<script>
export default {
  data(){
    return{
    }
  },
  beforeRouteEnter: (to,from,next) => {
    console.log("进入about之前");
    next(true)
  },
  beforeRouteLeave: (to,from,next) => {
    console.log("离开about之前");
    next(true)
  },
}
</script>