[Bug] Vue Router 在同一个页面跳转时默认会缓存数据

258 阅读1分钟

我正在参加「掘金·启航计划」

一、问题描述

在文章列表点击某篇文章的编辑:

image.png

编辑界面点击写文章image.png

虽然跳转到了「新增文章」页面,但是「编辑文章」界面的内容未被清除。

image.png

尝试如下方法无效:

在 mount() 内,即在组件挂载后
(1)清空表单:model绑定的数据模型
(2) 使用Ant <a-form-model>自带的resetFields()

二、问题分析

Vue 如果检测到跳转的是同一个页面,那么之前的数据将不会被刷新掉,而是缓存起来。

三、解决方案

在当前路由组件的父级,即<router-view>标签内添加一个:key="route.fullpath"。「更新文章」页面->「新增文章」时Vue 便不会判定为同一页面,也就不会缓存之前的结果了。

四、总结

补一补Vue RouterVue 缓存机制Vue 生命周期相关知识点。