javascript - 导航时刷新 Vue 组件

标签 javascript css vue.js vuejs2

我有两个版本的导航栏。

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

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

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

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

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

最佳答案

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

像这样:

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

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

关于javascript - 导航时刷新 Vue 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52847254/

相关文章:

CSS DRY 按钮状态

html - Django:如何在 Bootstrap 中将表单集中在 html 模板上?

javascript - 当我悬停另一个时,jQuery 只显示一个 div

vue.js - 在 V-CALENDAR Vuetify Vuejs 中显示来自 Api 的数据

javascript - VUE : when emitted event call parent conponent, 我们可以获得参数,其中包括发出事件传递的所有参数

javascript - 如何移动/重新排序 html 表格行

javascript - 如何在 onPress 中传递按钮的 id - React Native

javascript - Perl CGI 和 JavaScript |选择选项的烦恼

javascript - 在对话框打开时重置 Vuetify 表单

javascript - 从不同路径使用 .babelrc