单击链接会更改 url，但不会更改页面上的内容/数据答案

【问题标题】：Click on link changes the url but not the content/data on page单击链接会更改 url，但不会更改页面上的内容/数据
【发布时间】：2017-05-08 23:11:35
【问题描述】：

故事：

我在产品页面 #/product/7 上，在同一页面上我还有 4 个与正在查看的产品相似的产品。所有这些产品都有指向其页面的链接：

router-link(:to="{ name: 'product', params: { id: product.id }}" v-text='product.title').

问题：

当我点击任何产品链接时，网址会发生变化，但内容保持不变。因此，如果我在#/product/7 上并单击#/product/8，则网址只会更改。如果我从 /product/:id 页面导航并单击产品，它会将我带到包含正确内容的正确页面。

正如您在屏幕截图中看到的，当前产品 id 是 15，但内容是 id 7 中的一个，如下面的 url 所示，当我将鼠标悬停在购物车中的 Sleek Silk Shirt 产品上时。任何想法如何解决这个问题？

【问题讨论】：

标签： vue-router vue.js

【解决方案1】：

当你改变路线时，你必须更新 products 变量的数据，因为 vue 优化了页面重新加载，如果你在同一条路线上，则不会重新加载。

您可以调整方法：Fetching Before Navigation 在 vue-router docs 中描述：

通过这种方法，我们在实际导航到新路线之前获取数据。我们可以在传入组件的 beforeRouteEnter 守卫中进行数据抓取，只有在抓取完成后才调用 next：

export default {
  data () {
    return {
      product: {},
      error: null
    }
  },
  beforeRouteEnter (to, from, next) {
    getProduct(to.params.id, (err, product) => {
      if (err) {
        // display some global error message
        next(false)
      } else {
        next(vm => {
          vm.product = product
        })
      }
    })
  },
  // when route changes and this component is already rendered,
  // the logic will be slightly different.
  watch: {
    $route () {
      this.product = {}
      getProduct(this.$route.params.id, (err, product) => {
        if (err) {
          this.error = err.toString()
        } else {
          this.product = product
        }
      })
    }
  }
}

【讨论】：

工作。太感谢了。 :)
这很有帮助，我遇到了一个错误，通过在 beforeRouteEnter 钩子上添加 next() 方法解决了这个问题。
也许值得注意的是，虽然上面的内容很有帮助，但修复 OP 的问题只需要 watch() 部分。在 beforeRouteEnter() 中加载数据只是为这个用例加载数据的几个可能的有效设计选择之一。

【解决方案2】：

我无法用“getProduct”真正内化上述答案，所以简单地说。

我正在使用 Store，我需要观察 $route，当它发生变化时，我调用我的 store 来调度 api 调用。

watch: {
    $route () {
      this.$store.dispatch('fetchStudyStandards', 
      this.$route.params.standardID);
    }
}

所以基本上看路线，如果它改变了，重新做你的 api 调用。

【讨论】：