Ah, I’ve run into this exact issue before with Vue Router! The problem is that when you navigate between routes that only differ by a parameter (like the user ID in your /user/:id route), Vue reuses the same component instance instead of creating a new one. That means your component’s created() or mounted() hooks—where you probably fetch the user data—don’t run again, so the content stays stuck on the old user.

Here are three solid ways to fix this:

1. Watch the $route object for param changes #

Add a watcher to detect when the route's id parameter updates, then trigger a re-fetch of your user data:

<script>
export default {
  data() {
    return {
      user: null
    }
  },
  created() {
    // Fetch initial user data on component mount
    this.fetchUser(this.$route.params.id)
  },
  methods: {
    async fetchUser(userId) {
      // Replace this with your actual API call logic
      const response = await fetch(`/api/users/${userId}`)
      this.user = await response.json()
    }
  },
  watch: {
    // Watch for changes to the id param
    '$route.params.id'(newUserId) {
      this.fetchUser(newUserId)
    }
  }
}
</script>

2. Use the beforeRouteUpdate navigation guard #

This is a built-in Vue Router guard that runs before the route updates but the component is reused. It’s a clean, intentional way to handle param changes:

<script>
export default {
  data() {
    return {
      user: null
    }
  },
  created() {
    this.fetchUser(this.$route.params.id)
  },
  methods: {
    async fetchUser(userId) {
      const response = await fetch(`/api/users/${userId}`)
      this.user = await response.json()
    }
  },
  async beforeRouteUpdate(to, from, next) {
    // Fetch data using the incoming route's ID
    await this.fetchUser(to.params.id)
    // Always call next() to proceed with the route change
    next()
  }
}
</script>

3. Force component re-render with a key on <router-view> #

If you want a quick, no-fuss fix (though slightly less performant), add a unique key to your <router-view> component. This tells Vue to treat every route as a separate component instance, so it will re-mount the component and run all lifecycle hooks on every route change:

<!-- In your App.vue or parent component containing router-view -->
<router-view :key="$route.fullPath"></router-view>

Which solution should you pick? #

• Go with watchers or beforeRouteUpdate for better performance—they reuse the component instance, avoiding unnecessary re-mounts.
• Use the key approach if your component is small or you want to avoid modifying the component’s internal logic.

All three methods will resolve your issue where the URL updates but the page content stays unchanged. The first two are the recommended best practices for Vue Router!

内容的提问来源于stack exchange，提问作者sitou