问题描述:响应路由参数的变化,使用带有参数的路由时需要注意的是,当用户从 /users/johnoy 导航到 /users/jolyne 时,相同的组件实例将会被重复使用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会被调用。
简单来说就是,响应路由只有参数变化,而且这些路由渲染的组件都是同一个,只是组件请求并绑定的数据不一样。这样的话用户从 /users/johnoy 导航到 /users/jolyne 时,这个组件就不会被销毁,而是一直存在,所以它的onMounted等钩子都不会被触发。
正常来说,我们向后端请求数据会在onMounted函数进行,那么导致的后果就是当路由即使正确跳转了,我们渲染的网页并不会刷新数据(这就很坏了
解决问题的思路有两个:
- 让组件实例不在复用,强制销毁重建
- 监听路由变化,变化之后执行数据更新操作
方案一
以当前路由完整路径为key值,给RounterView组件绑定
key通常与v-for进行配套使用,但是他也能用于强制替换一个元素/组件而不是复用
适当时候触发组件生命周期钩子
触发过滤
这是第一个解决思路的实现,比较消耗性能
方案二
beforeRouteUpdate导航守卫,beforeRouteUpdate钩子函数可以在每次路由更新之前执行,在回调中执行需要数据更新的业务逻辑即可。这是解决思路2的实现
或者使用watch监听路由参数,从而刷新数据
这种方法的性能更好一些