Vue.js 单击链接会更改 url，但不会更改页面上的内容数据

发布于12月23日

the story:

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

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

the problem:

当我点击任何产品链接时，url都会改变，但内容保持不变.所以，如果我在#/product/7上点击#/product/8，url只会改变.如果我从/product/:id页浏览并点击一个产品，它会把我带到正确的页面和正确的内容.

正如你在屏幕截图上看到的，当前产品id是15，但内容是id 7中的内容，正如我在购物车中的光滑丝绸衬衫产品上悬停时底部的url所示.

推荐答案

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

您可以采用vue路由docs:

使用这种方法，我们在实际导航到新路由之前获取数据.我们可以在传入组件中的beforeRouteEnter guard中执行数据提取，并且只有在提取完成时才调用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
        }
      })
    }
  }
}