javascript - 将 vue-gtm(谷歌标签管理器)附加到 Router 实例

Question

使用此包: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({})

Answer 1

您错误地为 vueRouter 传递了 Router 类:

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

vueRouter 值应该是路由器实例，因此 router.js 应类似于以下内容:

const routes = [
  //...
]

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

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

export default router