Question

我已根据CMS中保存的服务器页面返回的数据实现了组件路由。摘要 - 在路由更改时，路径将发送到服务器，该服务器返回该模板的模板名称和数据。模板名称映射到组件名称，然后使用该数据。我看到的问题是，在更改路由后，在创建并显示目标组件时，原始组件（源路由）也会创建两次。

这是从服务器获取数据并使用它来设置新路由的代码。

router.beforeEach((to, from, next) => {
  if (!app) {
    next()
    return
  }
  // get page data from the server.
  app.$store.dispatch('getPageData', to.fullPath).then(r => {
    // check whether vue-router knows this route
    // if not then map it to the right component
    if (to.matched.length === 0) {
      let component = mapTemplate(r.data.page.template)
      // add the route (undocumented but intentionally released)
      router.addRoutes([{path: to.path, component}])
      // change to the same route now that vue-router knows it
      next(to.fullPath)
      return
    }
    next()
  })
})

现在（删节）控制台日志。日志中捕获的序列是：

loading＆＃39; /＆＃39;它使用模板p-home.vue。
使用菜单导航到/ ready-to-wear /使用组件p-rtw-products

粗体行显示p-home生命周期挂钩。 italic 行显示路由完成vue-router的时间。说＆＃34;设置路线＆＃34;显示添加到路由器的新路由。

p-home.vue?1e58:54 p-home created
p-home.vue?1e58:54 p-home mounted
lmd-app.vue?70d9:48 fetchdata for /
index.js?3672:62 router.beforeEach() / => /ready-to-wear/
p-home.vue?1e58:54 p-home destroyed
p-home.vue?1e58:54 p-home created
p-home.vue?1e58:54 p-home mounted
index.js?3672:73 beforeEach() setting route /ready-to-wear/ target: PRtwProducts
index.js?3672:62 router.beforeEach() / => /ready-to-wear/
p-home.vue?1e58:54 p-home destroyed
p-home.vue?1e58:54 p-home created
p-home.vue?1e58:54 p-home mounted
index.js?3672:77 router.afterEach()
p-rtw-products.vue?5a57:22 p-rtw-products created
p-home.vue?1e58:54 p-home destroyed
p-rtw-products.vue?5a57:25 p-rtw-products mounted

好的，谢谢所有已经走到这一步的人。我期待p-home的一个创建 - 破坏序列，但有三个。我甚至可以想象，因为它是创建它的路线的原始来源已经排队（虽然我不相信它）。

有谁知道它为什么会这样做？

什么原因导致创建Vue组件？

0 个答案: