Vue之路由里的钩子函数

灰太狼 2022-04-17 20:26 226阅读 0赞

*  在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两个钩子函数