钩子函数

Posted 2020-11-24 su-feng-address

1、全局的钩子

beforeEach(to,form,next)

afterEach(to,form,next)

 

2、组件内的导航钩子

组件内的导航勾走i主要有这三种：beforeRouterEnter、beforeRouterUpdate、beforeRouteLeave,它们是直接在路由组件内部直接进行定义的

 

methods: {},
beforeRouteLeave (to, from, next) {}

（需要注意的是，beforeRouteEnter 不能获取组件实例 this，因为当守卫执行前，组件实例还没有被创建，剩下的两个钩子则可以正常获取组件实例this）

 

beforeRouteEnter获取到this实例

 
beforeRouteEnter (to, from, next) {
 
next(vm => {
 
  // 通过 `vm` 访问组件实例
 
  })
 
}

 

相关概念：

1、导航

2、守卫

...

 

const router = new Router({
    mode: "hash",
    base: process.env.BASE_URL,
    routes: [
        {
            path: "/",
            redirect: "index"
        },
        // 首页
        {
            path: "/index",
            name: "Index",
            component: () => import("@/views/Index/Index.vue"),
            meta: {
                showBaseTabbar: true,
                needLogin: false,
                requireAuth: true,
                name: "首页"
            }
        },

           {

              path: "/login/loginDeny",

              name: "logindeny",

              component: () => import("@/views/Index/LoginDeny.vue"),

              meta: {

                  showBaseTabbar: true,

                  needLogin: false,

                  name: "登录失败"

              }

          },

         ....
        {
            path: "/batchProvideCoupon",
            name: "BatchProvideCoupon",
            component: () =>
                import("@/views/BatchProvideCoupon/BatchProvideCoupon.vue"),
            meta: {
                showBaseTabbar: false,
                needLogin: false,
                requireAuth: false,
                name: "xxx"
            }
   }

 

// 判断是否有 openID
router.beforeEach((to, from, next) => {
    if (to.matched.some(res => res.meta.requireAuth)) { // 判断是否需要登录权限
        if (window.localStorage.getItem(‘openID‘)) {
            next();
        } else {
            next({
                path: "/login/loginDeny"
            });
        }
    } else {
        next();
    }
});

 

 错误的字面意思是：超出最大调用堆栈大小。

这种错误的产生情况可能是router里面路径未声明，变量未定义，递归函数产生死循环。

在这次开发项目的过程中，我出现了这么情况，原因是判断没有openID时，跳入登录失败页面,登录页面又需要登陆权限，没有openID时又进入登陆失败页面，进入死循环。