Rails设置的flash消息在Vue渲染模板前几秒消失，如何延长显示时长？

你遇到的现象本质是服务端渲染的Flash消息DOM节点，被Vue组件挂载时的渲染逻辑覆盖清空了，不是消息自动超时消失，所以你之前试的flash.keep和beforeCreate里加延时都没生效：flash.keep是作用于后端会话存储，用来让Flash内容跨请求保留，和前端DOM被替换的问题无关；beforeCreate钩子内的setTimeout是异步逻辑，不会阻塞Vue实例的挂载流程，所以延迟不会生效。

以下是按优先级排序的解决方案： #

方案1：调整Vue挂载区域（最推荐） #

不要让Vue的挂载节点包含Flash渲染区域，避免Flash被Vue的渲染逻辑覆盖。
比如原来你可能是把Vue挂载到整个页面容器：

<!-- 原代码结构 -->
<body>
  <div id="app">
    <div class='flash'>
      <% flash.each do |key, value| %>
        <div class="alert alert-<%= key %>">
          <%= value %>
        </div>
      <% end %>
    </div>
    <!-- 其他Vue渲染的内容 -->
  </div>
</body>

调整为把Flash挪到Vue挂载容器外面：

<body>
  <div class='flash'>
    <% flash.each do |key, value| %>
      <div class="alert alert-<%= key %>">
        <%= value %>
      </div>
    <% end %>
  </div>
  <div id="app">
    <!-- 其他Vue渲染的内容 -->
  </div>
</body>

这种方案不需要修改业务逻辑，Flash的显示时长可以自己用前端JS控制，比如加个全局的超时隐藏逻辑：

document.addEventListener('DOMContentLoaded', () => {
  const flashAlerts = document.querySelectorAll('.alert')
  if (flashAlerts.length) {
    setTimeout(() => {
      flashAlerts.forEach(alert => alert.remove())
    }, 5000) // 自定义显示时长
  }
})

方案2：把Flash数据传给Vue渲染 #

如果Flash必须放在Vue控制的区域内，就把Flash内容从后端传到前端，由Vue负责渲染：

1. 先在ERB模板里把Flash数据注入全局变量：

<script>
  window.flashMessages = <%= flash.to_json.html_safe %>
</script>

2. 在Vue组件里读取window.flashMessages渲染提示，自定义显示时长：

<template>
  <div class="flash">
    <div v-for="(msg, key) in flash" :key="key" :class="`alert alert-${key}`">
      {{ msg }}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flash: window.flashMessages || {}
    }
  },
  mounted() {
    setTimeout(() => {
      this.flash = {}
    }, 5000)
  }
}
</script>

方案3：延迟Vue挂载（不推荐，体验差） #

如果你确实需要延迟Vue的挂载，直接把Vue实例化逻辑包在延时里即可，不要在生命周期钩子内加延时：

setTimeout(() => {
  new Vue({
    el: '#app',
    // 其他Vue配置
  })
}, 5000)

这个方案会导致页面5秒内Vue控制的区域都没有渲染，用户体验差，仅作参考。

内容的提问来源于stack exchange，提问作者r3b00t