工作中遇到的问题之——vue如何强制刷新DOM

2021-09-12 1,772 阅读1分钟

如下图所示，开发的业务场景是，点击左侧导航，右侧显示问题标题，点击标题进入具体内容页，再点击左侧导航或者返回按钮，回到标题页。

开发中遇到的问题

点击内容A-->标题一-->进入内容页后，再点击内容A无法回到内容A的标题页。

解决办法

利用v-if和$nextTick，对右侧内容页组件进行刷新，重新加载即可。代码如下：组件：

<router-view v-if="hackReset" />

js代码：

data(){
    return{
        hackReset:false
        }
    }
sidebarClick(index, indexPath, vnCode) {
        // 点击侧边栏强制刷新组件
        this.hackReset = false;
        ```
        // $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，
        // 在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
        this.$nextTick(() => {
            this.hackReset = true;
        });
    ....
    }

原理即利用v-if完成对子组件的销毁和重建。画图工具：Excalidraw