缓存问题:当路由path一样,参数不同的时候会选择直接复用路由对应的组件,将会导致部分内容不能更新
解决问题的思路:
- 让组件实例不复用,强制销毁重建
- 监听路由变化,变化之后执行数据更新操作
解决方案:
方案一:给router-view添加key以当前路由完整路径为key的值,给router-view组件绑定
<RouterView :key="$route.fullpath">
方案二:使用onBeforeRouteUpdate导航钩子
onBeforeRouteUpdate钩子函数可以在每次路由更新之前执行,在回调中执行需要数据更新的业务逻辑即可
import {onBeforeRouteUpdate} from 'vue-Router'
onBeforeRouteUpdate((to, from)=> {
//数据更新业务逻辑
})