App.vue设置loading为false后路由组件不显示的问题

核心问题在于router-view的显示条件逻辑错误：当前代码中router-view仅在loading为true时渲染，且内部只放置了Loading组件。当loading设为false后，router-view直接不渲染，导致页面组件无法显示。

修复步骤 #

1. 修正router-view的条件渲染结构 #

将router-view和Loading组件的显示逻辑调整为：加载状态显示Loading，加载完成后显示页面路由内容。修改v-container内的代码如下：

<v-container>
  <!-- 加载完成时显示路由页面 -->
  <router-view v-if="!loading"></router-view>
  <!-- 加载中显示Loading组件 -->
  <Loading v-else></Loading>
</v-container>

或者也可以将Loading放在上方，逻辑更直观：

<v-container>
  <Loading v-if="loading"></Loading>
  <router-view v-else></router-view>
</v-container>

2. 确保loading状态正确更新 #

当前setup中loading初始值为true，需要在页面加载完成或数据请求结束后将其设为false。比如在onMounted钩子中添加逻辑：

setup() {
  const loading = ref(true);
  
  onMounted(() => {
    // 这里替换为实际的加载完成逻辑（比如接口请求结束）
    setTimeout(() => {
      loading.value = false;
    }, 1000);
  });
  
  return {
    loading,
  };
},

3. 清理冗余定义 #

注意data函数中注释掉的loading: ref(false)，确保不要重复定义loading变量，避免冲突。

额外注意事项 #

• 如果需要在路由切换时也显示加载状态，可以结合Vue Router的全局守卫（beforeEach/afterEach）来控制loading的切换。
• 确保Loading组件的样式不会遮挡导航栏，或者可以给Loading添加合适的定位样式。

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