文章目录


1. 引言

在前面的章节，已经讲解了部分vue-element-admin的知识




本文要讲解的是钩子触发失败的问题。

2. 引出问题

有时候我们使用​​router-view​​​的时候，因为是同一个组件​​conpoment​​，会导致钩子函数无法触发。

举例：

Vue项目实战（06）- 钩子方法触发失败的解决_项目结构

看代码，可以知道创建和编辑的页面使用的是同一个​​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()
    }
 }

本文完！