将 vue-gtm（谷歌标签管理器）附加到路由器实例答案

【问题标题】：Attaching vue-gtm (google tag manager) to a Router instance将 vue-gtm（谷歌标签管理器）附加到路由器实例
【发布时间】：2023-03-11 18:11:02
【问题描述】：

使用这个包：https://www.npmjs.com/package/vue-gtm

在 router.js (vue cli 3) 中，我正在尝试将其附加到路由器实例：

import Vue from 'vue'
import Router from 'vue-router'
import VueGtm from 'vue-gtm'

Vue.use(VueGtm, {
  id: 'GTM-xxxxxxx',
  enabled: true,
  debug: true,
  vueRouter: Router
})

export default new Router({
  mode: 'history'
})

但是，显然，这行不通。在我的情况下，如何将 vue-gtm 附加到路由器，我导出路由器实例，而不是将其设置为变量：

const router = new Router({})

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

您错误地将Router 类传递给vueRouter：

Vue.use(VueGtm, {
  //vueRouter: Router, // <-- DON'T DO THIS
})

vueRouter 的值应该是路由器instance，所以router.js 应该类似于：

const routes = [
  //...
]

const router = new Router({
  mode: 'history',
  routes
})

Vue.use(VueGtm, {
  vueRouter: router, // <-- router instance
  //...
})

export default router

【讨论】：

你已经把它设置为一个变量，没有别的办法吗？
@AlexanderKim 我不知道。你为什么要避免这个变量？
只是好奇，有使用export default new Router 和变量的专业人士吗？为什么vue router默认是第一种方式？
不是真正的任何专业人士。在这种情况下需要该变量来初始化VueGtm 插件。如果VueGtm 不在同一个文件中，那么这里就不需要中间变量，只需在一行中导出新实例化的Router。您通常会在 vue-router 文档中看到 external default new Router 的用法，因为通常不需要需要 router 实例的插件。