单击 link 会更改页面上的 url 但不会更改 content/data

Question

故事：

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

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

问题：

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

正如您在屏幕截图中看到的，当前产品 ID 为 15，但内容是来自 ID 7 的内容，如我将鼠标悬停在 Sleek Silk Shirt 产品上时底部的 url 所示在购物车中。有什么解决办法吗？

Answer 1

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

您可以采用以下方法：Fetching Before Navigation vue-router docs:

中的描述

With this approach we fetch the data before actually navigating to the new route. We can perform the data fetching in the beforeRouteEnter guard in the incoming component, and only call next when the fetch is complete:

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
        }
      })
    }
  }
}

Answer 2

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

我正在使用商店，我需要观察 $route，当它发生变化时，我打电话给我的商店来调度 api 呼叫。

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

所以基本上要观察路线，如果它发生变化，请重新进行 api 呼叫。

单击 link 会更改页面上的 url 但不会更改 content/data

Click on link changes the url but not the content/data on page

vue.js

vue-router