场景:需要根据不同的 $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()
},