Vue子组件浏览器刷新后空白问题求助

问题现象 #

• 通过<b-nav-item>或<b-dropdown-item>首次导航进入组件时，内部包含表单的子组件显示正常
• 刷新浏览器或跳转至其他组件后返回，这类仅包含表单、无数据更新逻辑、路由守卫或属性传递逻辑的子组件会变成空白
• 尝试给<b-nav-item>添加key属性，无法解决问题

路由配置示例 #

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('./components/Home.vue')
  },
  {
    path: '/form',
    name: 'FormView',
    component: () => import('./components/FormView.vue')
  }
]

导航代码示例 #

<b-navbar type="dark" variant="info">
  <b-navbar-brand href="#">Demo App</b-navbar-brand>
  <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
  <b-collapse id="nav-collapse" is-nav>
    <b-navbar-nav>
      <b-nav-item :to="{ name: 'Home' }">首页</b-nav-item>
      <b-nav-item :to="{ name: 'FormView' }">表单页面</b-nav-item>
      <b-dropdown text="菜单" variant="info">
        <b-dropdown-item :to="{ name: 'FormView' }">表单页面</b-dropdown-item>
      </b-dropdown>
    </b-navbar-nav>
  </b-collapse>
</b-navbar>

解决方法 #

1. 给子组件绑定唯一key #

在父组件引用表单子组件时，绑定基于当前路由地址的key，强制Vue每次路由变化时重新渲染组件：

<!-- 父组件中使用子组件的代码 -->
<FormSubComponent :key="$route.fullPath" />

2. 移除或配置keep-alive #

如果路由视图被<keep-alive>包裹，组件会被缓存导致无法重新渲染。可以直接移除<keep-alive>，或者给需要刷新的组件添加排除规则：

<router-view v-slot="{ Component }">
  <keep-alive exclude="FormView">
    <component :is="Component" />
  </keep-alive>
</router-view>

3. 监听路由变化强制更新 #

在表单子组件中监听路由变化，调用$forceUpdate()强制组件重新渲染：

export default {
  watch: {
    $route() {
      this.$nextTick(() => {
        this.$forceUpdate()
      })
    }
  }
}

4. 升级Bootstrap-Vue版本 #

部分旧版本的Bootstrap-Vue存在路由切换后表单渲染异常的bug，执行以下命令升级到最新稳定版：

npm update bootstrap-vue bootstrap vue

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