VueJs中BootstrapVue导航栏加载时Bootstrap样式延迟问题求助

问题说明 #

在Vue.js前端项目中使用BootstrapVue导航栏组件时，页面加载或刷新时，导航栏会短暂显示未加载Bootstrap样式的原始状态，影响用户体验。

用户提供的代码 #

导航栏HTML代码 #

<div id="navbar">
<b-navbar toggleable="lg" type="light" variant="light">
{% if user.is_authenticated and user.is_staff %} 
<b-navbar-brand href="{% url 'home' %}"> Inicio </b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
  
  <b-navbar-nav>            
    <!-- Navbar dropdowns -->
    <b-nav-item-dropdown text="Maestros">
      <b-dropdown-item href="#">Candidatos</b-dropdown-item>
      <b-dropdown-item href="#">Candidaturas</b-dropdown-item>
      <b-dropdown-item href="#">Centros</b-dropdown-item>
      <b-dropdown-item href="#">Circunscripciones</b-dropdown-item>
      <b-dropdown-item href="{% url 'elecciones' %}">Elecciones</b-dropdown-item>
      <b-dropdown-item href="#">Estudios</b-dropdown-item>
      <b-dropdown-item href="{% url 'locales' %}">Locales de votación</b-dropdown-item>
      <b-dropdown-item href="#">Mesas</b-dropdown-item>
      <b-dropdown-item href="#">Urnas</b-dropdown-item>
    </b-nav-item-dropdown>

    <b-nav-item-dropdown text="Personas" right>
      <b-dropdown-item href="#">Account</b-dropdown-item>
      <b-dropdown-item href="#">Settings</b-dropdown-item>
    </b-nav-item-dropdown>

    <b-nav-item-dropdown text="Datos Personales" right>
      <b-dropdown-item href="#">Account</b-dropdown-item>
      <b-dropdown-item href="#">Settings</b-dropdown-item>
    </b-nav-item-dropdown>
    <b-nav-item-dropdown text="Consulta Censo" right>
      <b-dropdown-item href="#">Account</b-dropdown-item>
      <b-dropdown-item href="#">Settings</b-dropdown-item>
    </b-nav-item-dropdown>
    <b-nav-item-dropdown text="Seguimiento" right>
      <b-dropdown-item href="#">Account</b-dropdown-item>
      <b-dropdown-item href="#">Settings</b-dropdown-item>
    </b-nav-item-dropdown>
    <b-nav-item-dropdown text="Resultados" right>
      <b-dropdown-item href="#">Account</b-dropdown-item>
      <b-dropdown-item href="#">Settings</b-dropdown-item>
    </b-nav-item-dropdown>
  </b-navbar-nav>
  {% endif %}
  <!-- Right aligned nav items -->
  <b-navbar-nav class="ml-auto">
    {% if user.is_authenticated %}            
      <b-nav-item href="{% url 'logout' %}">{{ user.username }} - Cerrar sesión</b-nav-item>
    {% endif %}
  </b-navbar-nav>
</b-collapse>
</b-navbar>
</div>

相关脚本代码 #

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js">   </script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<script>
  new Vue({ el: '#navbar' });
</script>

解决方案 #

1. 优先引入Bootstrap及BootstrapVue样式文件 #

当前代码仅引入了JS文件，缺少样式文件的提前加载。需在页面<head>标签中添加以下样式引用，确保页面渲染时样式已加载：

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

2. 使用v-cloak指令隐藏未初始化内容 #

通过v-cloak指令可以在Vue实例挂载完成前隐藏目标元素，避免原始HTML内容闪烁：

• 修改导航栏容器：

<div id="navbar" v-cloak>

• 在全局CSS中添加规则：

[v-cloak] {
  display: none;
}

3. 优化脚本加载顺序与方式 #

将核心脚本放在<body>末尾，或添加defer属性，避免脚本加载阻塞页面渲染：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js" defer></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js" defer></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js" defer></script>
<script defer>
  new Vue({ el: '#navbar' });
</script>

内容的提问来源于stack exchange，提问作者ASIER SALUEÑA SEDILES