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

Question

我有一个用 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 触发了一个无休止的递归调用，因为源代码如下所示：

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

Answer 1

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

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

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