zoukankan      html  css  js  c++  java
  • 钩子函数

    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时又进入登陆失败页面,进入死循环。

    未完,待续......
  • 相关阅读:
    局域网内其他主机如何访问运行在宿主机的虚拟机中的Django项目(转)
    python3脚本获取本机公网ip
    django之允许外部机器访问
    Mysql命令drop database:删除数据库
    CentOS和Windows下配置MySQL远程访问的教程
    Windows 下 MySql 5.7.20安装及data和my.ini文件的配置(转)
    远程登陆linux连接mysql root账号报错:2003-can't connect to MYSQL serve(转)
    Mysql创建用户并授权以及开启远程访问
    Android 之 自定义标签 和 自定义组件
    再探java基础——零碎基础知识整理
  • 原文地址:https://www.cnblogs.com/zhishiyv/p/12054628.html
Copyright © 2011-2022 走看看