如何响应路由参数变化
# 问题
- 切换路由,路由参数发生了变化,但是页面数据并未及时更新,需要强制刷新后才会变化。
- 不同路由渲染相同的组件时(组件复用比销毁重新创建效率要高),在切换路由后,当前组件下的生命周期函数不会再被调用。
# 解决方案:
# 1. 使用 watch 监听
watch: {
$route(to, from){
if(to != from) {
console.log("监听到路由变化,做出相应的处理");
}
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 2. 向 router-view 组件中添加 key
<router-view :key="$route.fullPath"></router-view>
1
$route.fullPath 是完成后解析的URL,包含其查询参数信息和hash完整路径