Vue页面切换后不刷新，如何解决？

本文共计1141个文字，预计阅读时间需要5分钟。

Vue-router 的切换不同于传统页面的切换。在 Vue-router 中，所谓的切换实际上是指组件之间的切换，而不是真正的页面切换。这意味着，虽然用户界面看起来发生了变化，但实际上并没有加载新的 HTML 页面。

这种组件切换方式带来一个问题，即当引用相同组件时，可能会出现该组件无法正常工作的情况。这是因为 Vue-router 的组件切换机制在切换时不会销毁和重新创建组件实例，而是会复用现有的实例。如果组件依赖于外部状态或数据，而外部状态在切换过程中没有正确更新，就可能导致组件无法正常显示或工作。

前言：vue-router的切换不同于传统的页面的切换。路由之间的切换，其实就是组件之间的切换，不是真正的页面切换。这也会导致一个问题，就是引用相同组件的时候，会导致该组件无法更新，也就是我们口中的页面无法更新的问题了。

一、问题呈现

在路由中进行切换结果

这时候会发现input标签的value值并没有随着路由的改变而改变。并没有更新

二、解决方案①

给<router-view :key="key"></router-view>增加一个不同:key值，这样vue就会识别这是不同的<router-view>了。