vue-gtag 错误：“超出最大调用堆栈大小”

Posted 2023-02-23

【中文标题】vue-gtag 错误：“超出最大调用堆栈大小”

【英文标题】：vue-gtag error: "maximum call stack size exceeded"

【发布时间】：2021-12-05 06:58:51

【问题描述】：

我有一个用 Typescript 编写的 Vue 应用程序，通过 Google Analytics 进行跟踪需要自定义维度。 “vue-gtag”包似乎是最好的选择，所以我安装了它。我阅读了文档，并尝试以相同的方式进行设置。

在我的 main 中，它包含在 Vue 中，如下所示：

Vue.use(VueGtag, 
  config:  id: 'GTM-XXXXXXX' ,
  router,
);

我的路由器是这样设置的：

Vue.use(VueRouter);

const routes: Array<RouteConfig> = [
  
    path: '',
    component: LoggedInLayout,
    meta: 
      requiresAuth: true,
    ,
    children: [
      // Children that require auth
      
        path: '',
        redirect: '/dashboard',
      ,
      
        path: '/dashboard',
        name: 'Dashboard',
        component: Dashboard,
      ,
      
        path: '/settings',
        name: 'User Settings',
        component: UserSettings,
        meta:  title: 'Custom page title' ,
      ,
      
        path: '/search/:page',
        name: 'Search',
        component: Search,
        props: (route) => (
          ...route.params,
        ),
        meta:  title: 'Custom page title' ,
      ,
      // More like this
    ],
  ,
  
    path: '',
    component: DefaultLayout,
    meta: 
      requiresAuth: false,
    ,
    children: [
      // Children that don't require auth
      
        path: '',
        redirect: '/home',
      ,
      
        path: '/home',
        name: 'Home',
        component: Home,
        meta:  title: 'Custom page title' ,
      ,
      
        path: '/about',
        name: 'About',
        component: About,
        meta:  title: 'Custom page title' ,
      ,
      
        path: '/contact',
        name: 'Contact',
        component: Contact,
        meta:  title: 'Projektagenten - Kontakt Os' ,
      ,
      // More like this
      // Any other path we redirect to home
      
        path: '*',
        redirect: '',
      ,
    ],
  ,
];

const router = new VueRouter(
  mode: 'history',
  routes,
  scrollBehavior: (to) => 
    if (to.hash) 
      return 
        selector: to.hash,
      ;
     else 
      return  x: 0, y: 0 ;
    
  ,
);

// Authentication guard for routes with authentication required
router.beforeEach((to, from, next) => 
  if (to.matched.some((record) => record.meta.requiresAuth == true)) 
    if (!cookieUtils.getCookie('session')) 
      next( name: 'Home' );
     else 
      next();
    
   else 
    next();
  
);

router.afterEach((to, from) => 
  Vue.nextTick(() => 
    document.title = to.meta.title || to.name;
  );
);

export default router;

我的问题是在我运行项目时开始，然后打开项目页面，我得到一个空白页面和控制台中的以下错误：

好像我用 vue-gtag 触发了一个无休止的递归调用，因为源代码如下所示：

我很难确定这个错误，以及我做错了什么。 感谢您提供任何帮助，以及我最初尝试执行的任务的不同解决方案。

【参考方案1】：

您需要将路由器作为 Vue.use() 的第三个参数传递，而不是作为第二个参数的一部分

Vue.use(VueGtag, 
  config:  id: 'GTM-XXXXXXX' ,
, router);

在此处查看文档：https://matteo-gabriele.gitbook.io/vue-gtag/auto-tracking

【讨论】：

谢谢你，工作就像一个魅力。有时你可以对某事视而不见

@JaisBC 不客气。我遇到了同样的问题。