Vue Router路由组件渲染前获取Ajax数据避免undefined错误

你遇到的这个问题很典型：beforeRouteEnter里的异步请求还没完成，组件就已经开始渲染了，此时entry还是初始的null，访问entry.title自然会抛出undefined错误。下面给你几个实用的解决办法：

1. 模板层面添加条件渲染（最推荐） #

直接在模板里用v-if判断entry是否存在，只有当数据加载完成后才渲染依赖entry的内容，还能顺便加个加载提示提升用户体验：

<template>
  <main>
    <!-- 数据加载完成后渲染标题 -->
    <h1 v-if="entry">{{ entry.title }}</h1>
    <!-- 加载状态提示 -->
    <div v-else class="loading">正在加载案例详情...</div>
  </main>
</template>

这个方案简单高效，不需要修改太多逻辑，同时避免了不必要的报错，用户体验也更友好。

2. 使用可选链操作符（简洁但需环境支持） #

如果你用的是Vue 3，或者Vue 2配合了Babel插件（@babel/plugin-proposal-optional-chaining），可以直接用可选链操作符?.来访问属性，这样当entry为null/undefined时不会报错，而是返回undefined（页面上显示为空）：

<template>
  <main>
    <h1>{{ entry?.title }}</h1>
  </main>
</template>

这个方案代码最简洁，但要注意环境兼容性，适合现代项目使用。

3. 让路由等待数据加载完成后再进入 #

如果你希望完全等待数据加载完成后再渲染组件（不显示加载状态直接渲染完整内容），可以修改beforeRouteEnter的逻辑，确保请求完成后再允许路由进入。不过要注意，这种方式会让路由跳转有短暂延迟，需要权衡用户体验：

export default {
  name: 'CaseDetail',
  data() {
    return {
      entry: null
    };
  },
  async beforeRouteEnter(to, from, next) {
    try {
      // 等待请求完成
      const response = await axios.get(`/case/${to.params.slug}.json`);
      // 通过next的回调将数据注入组件实例
      next(vm => {
        vm.entry = response.data;
      });
    } catch (error) {
      // 请求失败时的处理，比如跳转到404页面
      next('/404');
    }
  }
}

不过即使这样，组件初始化时entry还是null，所以依然建议配合模板的v-if使用，避免渲染时的闪烁问题。

额外提示：初始化entry为对象（可选） #

你也可以把entry的初始值从null改成空对象{}，这样访问entry.title时只会得到undefined而不会抛出错误，但页面上会显示为空，不如前几种方案直观，一般不单独使用，配合其他方案效果更好：

data() {
  return {
    entry: {} // 改为空对象
  };
}

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