Vue/Inertiajs中基于URL分段切换组件时计算属性不更新的问题

计算属性不更新的核心原因 #

Vue的计算属性只会在它依赖的响应式数据变化时自动重新计算。你写的window.location.href不属于Vue的响应式系统范畴，所以当URL从mydomain/users切换到mydomain/contacts时，Vue根本察觉不到这个变化，计算属性自然不会重新执行，path的值也就停留在之前的users。

要不要用计算属性？ #

不是绝对不能用，得看有没有响应式的依赖源。直接依赖非响应式的window.location的话，计算属性的自动更新机制就失效了，这种场景下用计算属性意义不大。

可行的实现方案 #

方案1：用Vue Router（最省心，推荐） #

如果你的项目用了Vue Router，直接用$route这个响应式对象就行——路由切换时$route会自动更新，触发计算属性重新计算：

computed: {
  path() {
    return this.$route.path.split('/')[1] || '';
  }
}

方案2：监听URL变化（无Vue Router时用） #

没用到Vue Router的话，就手动监听浏览器的URL变化事件，同步更新数据：

data() {
  return {
    path: ''
  }
},
mounted() {
  this.setCurrentPath();
  // 监听浏览器前进后退导致的URL变化
  window.addEventListener('popstate', this.setCurrentPath);
},
beforeUnmount() {
  // 组件销毁时移除监听，防止内存泄漏
  window.removeEventListener('popstate', this.setCurrentPath);
},
methods: {
  setCurrentPath() {
    const firstSegment = new URL(window.location.href).pathname.split('/')[1];
    this.path = firstSegment || '';
  }
}

注意：如果是通过代码调用history.pushState/replaceState修改URL，要手动调用this.setCurrentPath()来更新path。

关于动态组件切换 #

用<component :is="path"/>切换侧边栏组件时，要注意两点：

• 确保path的值和你注册的组件名称完全匹配（比如你的组件叫Users，那path得是'Users'，或者注册组件时用小写的'users'）
• 不管用哪种方案，只要path变成响应式且能实时更新，动态组件就会自动切换对应的组件

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