Laravel+Vue项目侧边栏文章router-link仅URL变内容不更新问题

这是Vue Router同组件复用机制带来的典型问题：当两次跳转的路由指向同一个页面组件（比如都是文章详情路由，只是路径上的:id参数不同），Vue会直接复用已经渲染过的组件实例，不会重新触发created、mounted这类只在组件初始化时执行一次的生命周期钩子。
你从主页点文章进详情页功能正常，是因为第一次跳进来时组件是全新创建的，会正常执行初始化逻辑里的文章数据请求；但在详情页侧边栏点文章跳转时，路由对应的组件没有变，只是id参数更新了，组件实例没有被销毁重建，初始化里的请求逻辑根本不会再次执行，自然页面一直显示上一篇的内容。

根据你的项目技术栈，选适合的方式实现就行，三种方案按改造成本从低到高排序：

• 方案1：监听路由变化触发重新请求（最常用，性能最优）
  把原来写在初始化钩子里的文章请求逻辑抽成独立方法，再在组件内监听路由对象的变化，只要路由id更新就重新调用请求方法，不需要销毁重建组件：

  export default {
    data() {
      return {
        articleContent: {}
      }
    },
    // 第一次进入页面时正常执行初始化请求
    created() {
      this.getArticleDetail()
    },
    methods: {
      // 把请求逻辑抽成独立方法，两处逻辑复用，避免代码冗余
      async getArticleDetail() {
        const currentArticleId = this.$route.params.id
        // 调用Laravel后端的文章详情接口
        const res = await this.axios.get(`/api/articles/${currentArticleId}`)
        this.articleContent = res.data
      }
    },
    // 新增路由监听逻辑
    watch: {
      // 监听路由对象的整体变化
      '$route'(newVal) {
        // 仅当确实是文章详情页的id参数变化时才触发请求，避免无效接口调用
        if (newVal.name === 'ArticleDetail') {
          this.getArticleDetail()
        }
      }
    }
  }
  

  这个方案不会重建组件，性能开销最低，适合绝大多数内容站点的场景
• 方案2：给router-view绑定唯一key，强制组件重建
  如果不想改动组件内部的业务逻辑，可以直接在布局文件的router-view标签上，绑定和路由完整路径绑定的key，只要key值变化，Vue就会销毁旧组件、重新创建新组件，自然会完整走一遍初始化流程：
  原来的写法：

  <router-view />
  

  修改为：

  <router-view :key="$route.fullPath" />
  

  这个方案的代价是每次路由参数变化都会完整重建整个详情页组件，会有轻微的性能损耗，适合组件内部逻辑复杂、改动成本高的场景。
• 方案3：用官方导航守卫处理（适配Vue3+Vue Router4的推荐写法）
  如果你用的是Vue3的组合式API，不需要手动watch路由，直接用官方提供的onBeforeRouteUpdate钩子，这个钩子就是专门为同组件复用时的路由更新场景设计的：

  import { ref } from 'vue'
  import { onBeforeRouteUpdate, useRoute } from 'vue-router'
  import axios from 'axios'
  
  export default {
    setup() {
      const route = useRoute()
      const articleContent = ref({})
      
      // 封装统一的请求方法
      const fetchArticle = async (articleId) => {
        const res = await axios.get(`/api/articles/${articleId}`)
        articleContent.value = res.data
      }
      // 第一次进入页面时的初始请求
      fetchArticle(route.params.id)
  
      // 同组件路由更新时的触发逻辑
      onBeforeRouteUpdate((to) => {
        fetchArticle(to.params.id)
      })
  
      return {
        articleContent
      }
    }
  }
  

• 重新请求文章数据的时候，可以给文章内容区域加个简单的加载占位，避免接口返回慢的时候，用户看到新旧内容交替闪烁的问题。
• 如果项目给详情页加了KeepAlive缓存，要把缓存的key和文章id绑定，不然就算重新发请求，读到的还是旧的缓存数据。
• 监听路由的时候要加判断逻辑过滤非详情页的路由变动，避免用户跳其他页面的时候误发无效接口。

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