javascript - 导航时刷新 Vue 组件

Question

我有两个版本的导航栏。

版本 1 的文本颜色为白色。版本 2 的文本颜色为黑色。

这两个版本是必需的，因为在某些页面上背景颜色会变为白色....所以我需要使用黑色版本。

两个导航栏都是它们自己的组件。但是他们共享很多 CSS。

当我从一个页面导航到下一个页面时，导航栏的文本颜色没有改变。如果我刷新页面，就会出现预期的颜色。

在我看来组件正在被缓存。无论如何强制组件总是重新绘制？

Answer 1

尝试添加这个 :key="$route.fullPath"在你的<router-view></router-view>

像这样:

<router-view :key="$route.fullPath"></router-view>

将 key 添加到您的 <router-view>如果它具有不同的 url 但使用相同的组件，则重新加载页面。