1. 引言
在前面的章节,已经讲解了部分vue-element-admin的知识:
- 《Vue项目实战(01)-vue-element-admin项目结构分析》
- 《Vue项目实战(02)-Vuex状态管理模式》
- 《Vue项目实战(03)-alias》
- 《Vue项目实战(04)-axios封装》
- 《Vue项目实战(05)-多环境配置》
本文要讲解的是钩子触发失败的问题。
2. 引出问题
有时候我们使用router-view
的时候,因为是同一个组件conpoment
,会导致钩子函数无法触发。
举例:
看代码,可以知道创建和编辑的页面使用的是同一个component
,默认情况下当这两个页面切换时并不会触发vue
的created
或者mounted
钩子。
官方的解决方案是可以通过watch $route
的变化来做处理,但其实这并不是最优的方案。
下面来讲下解决方案。
3. 解决方案
解决方案:在 router-view
上加上一个唯一的key
,来保证路由切换时都会重新渲染触发钩子了。
代码如下:
<router-view :key="key"></router-view> computed: { key() { return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date() } }
本文完!