解决Vue同路由跳转后数据不更新

场景：需要根据不同的 $route.query 请求不同的数据

问题：由于使用 VueRouter 跳转时组件实例会被复用，跳转后无法拿到最新的 $route.query，并且地址栏的 url 不会变化

解决方法1

此方法一劳永逸，但是页面渲染速度会降低

• 指定页面

<!-- :key="$route.fullPath" 解决同路由但不同查询参数跳转后数据不更新 -->
<router-view
  v-if="$route.name === 'match_id-match'"
  :key="$route.fullPath"
/>
<router-view v-else />

• 所有页面

<!-- :key="$route.fullPath" 解决同路由但不同查询参数跳转后数据不更新 -->
<router-view :key="$route.fullPath" />

解决方法2

• beforeRouteUpdate()

使用 VueRouter 的导航守卫钩子 beforeRouteUpdate()，在里面写上路由更新前你需要重新执行的代码

示例：

beforeRouteUpdate(to, from, next) {
    this.zoneId = to.query.zone_id || null // 赛区id
    this._getMatchZones() // 根据this.zoneId，请求不同数据
    next()
},

最后：本人决定使用了解决方法2，因为不想降低页面渲染速度