• 钩子函数


    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();
        }
    });

    ‘Maximum call stack size exceeded’ 解决

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

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

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

    未完,待续......
  • 相关阅读:
    yarn之安装依赖包
    Yarn 的工作流-创建一个新项目
    yarn使用
    yarn安装
    用yarn替代npm
    搭建开发环境
    网页瞬间转换成桌面应用级程序(IOS/Win/Linux)
    [转]js模块化编程之彻底弄懂CommonJS和AMD/CMD!
    Node.js模块导出exports 和 module.exports 的区别
    Javascript modules--js 模块化
  • 原文地址:https://www.cnblogs.com/zhishiyv/p/12054628.html
Copyright © 2020-2023  润新知