Vue.js不同路由指向同一页面时页面不刷新、路由信息未更新问题解决方法

首先，咱们先理清楚问题的核心：Vue Router 为了性能优化，默认会复用相同的组件实例。所以当两个路由指向同一个组件时，切换路由不会触发组件的 created、mounted 等生命周期钩子，这就导致页面看起来没刷新；另外你的路由配置还存在路径写法的小问题，咱们一步步来解决：

第一步：修正路由配置（关键前提） #

看你的路由代码，子路由用了绝对路径（/ 和 /test2route），这会让子路由脱离父路由 /test1route 变成根路径下的独立路由，不符合你“两个不同路由打开同一页面”的需求。如果你的目标是 /test1route 和 /test2route 这两个独立路由都加载 List 组件，正确配置应该是这样：

import TestComponent from '@/Component/TestComponent'
export default [
  // 路由1：/test1route
  { 
    path: '/test1route', 
    component: TestComponent,
    children: [{ path: '', component: () => import('@/List') }] // 子路由用相对路径''，对应/test1route
  },
  // 路由2：/test2route
  { 
    path: '/test2route', 
    component: TestComponent,
    children: [{ path: '', component: () => import('@/List') }] // 子路由用相对路径''，对应/test2route
  }
]

如果不需要嵌套 TestComponent，直接让两个路由指向 List 组件会更简洁：

export default [
  { path: '/test1route', component: () => import('@/List') },
  { path: '/test2route', component: () => import('@/List') }
]

第二步：解决组件复用不刷新的问题 #

修正路由后，切换路由时组件还是会被复用，这里给你三种实用的解决方法：

方法1：监听 $route 变化触发更新 #

在 List 组件里添加路由监听，当路由切换时执行页面更新逻辑：

export default {
  // ...其他组件选项
  watch: {
    '$route': {
      handler(to, from) {
        // 这里写路由切换后的操作，比如重新加载数据、更新页面状态
        console.log('当前路由已更新：', to)
        this.reloadListData() // 假设你有加载列表数据的方法
      },
      immediate: true // 组件初始化时也执行一次监听逻辑
    }
  },
  methods: {
    reloadListData() {
      // 你的数据加载/页面更新逻辑
    }
  }
}

方法2：使用 beforeRouteUpdate 导航守卫 #

这是 Vue Router 专门为组件复用场景提供的导航守卫，能在路由更新前处理逻辑：

export default {
  // ...其他组件选项
  beforeRouteUpdate(to, from, next) {
    // 先处理路由变化的业务逻辑
    console.log('即将切换到新路由：', to)
    this.reloadListData()
    // 必须调用 next() 才能完成路由跳转
    next()
  },
  methods: {
    reloadListData() {
      // 你的数据加载/页面更新逻辑
    }
  }
}

方法3：给 <router-view> 加 key 强制重建组件 #

如果希望每次路由切换都完全重建组件实例（触发所有生命周期钩子），可以在父组件的 <router-view> 上绑定 key 为 $route.fullPath：

<!-- 比如在 TestComponent 或者 App.vue 中 -->
<router-view :key="$route.fullPath"></router-view>

这样每次路由变化，key 值都会改变，Vue 会销毁旧组件并创建新实例，页面自然就会完全刷新了。

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