Vue Router 路由跳转后页面不刷新怎么办？

皇甫红梅提问于 2026-03-19 17:38:22 阅读 4

前端

我在用 Vue Router 做单页应用，从 /home 跳到 /detail?id=123 的时候，页面内容没变，必须手动刷新才加载新数据。明明路由变了，但组件好像复用了，生命周期钩子也没重新触发，这该怎么处理？

我试过在 watch 里监听 $route，但感觉写起来很麻烦。是不是应该用 beforeRouteUpdate？还是说我的路由配置有问题？

<template>
  <div>{{ item.name }}</div>
</template>

<script>
export default {
  data() {
    return { item: {} }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      // 根据 this.$route.query.id 请求数据
    }
  }
}
</script>

我来解答赞 5 收藏

反馈

1 条解答

轩辕依依 Lv1

这是 Vue Router 的组件复用机制导致的。同一个组件切换参数时不会重新创建，用 watch 监听最简单：

export default {

  data() {

    return { item: {} }

  },

  created() {

    this.fetchData()

  },

  watch: {

    '$route'() {

      this.fetchData()

    }

  },

  methods: {

    fetchData() {

      // 根据 this.$route.query.id 请求数据

    }

  }

}

如果想更彻底地强制刷新整个组件，可以在 router-view 上加 key：

第一种方案应该能用了，组件内部监听变化就行。

2026-03-19 18:00