点击链接更改了网址

Question

故事：

我在产品页#/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产品上方悬停。 任何想法如何解决这个问题？

Answer 1

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

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

  

通过这种方法，我们在实际导航到新路线之前获取数据。我们可以在传入组件中的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
        }
      })
    }
  }
}

Answer 2

我无法真正将上述答案内部化为'getProduct'，因此简单地说。

我正在使用商店，我需要观看$ route，当它改变时，我打电话给商店来调度api调用。

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

因此，基本上观察路线，如果路线发生变化，请重新执行api调用。