Vue3中Axios取数渲染报错及路由返回数据不显示问题咨询

第一个问题：页面刷新时数据未定义，热重载正常 #

原因 #

组件首次渲染时，Axios的异步请求还没完成，但模板已经直接访问了未初始化的变量（比如{{ data.title }}），导致报错。而Vite热重载是在请求完成后重新渲染组件，此时数据已经存在，所以不会报错。

解决方法 #

1. 给数据设置初始默认值
   在组件的状态初始化时，给请求对应的变量设置空对象/空数组，避免访问undefined的属性：

   // Vue 示例
   data() {
     return {
       apiData: {} // 初始化空对象，而非undefined
     }
   }
   
   // React 示例
   const [apiData, setApiData] = useState({})
   

2. 模板加条件渲染判断
   确保数据存在后再渲染对应内容，或者用可选链操作符规避报错：

   <!-- Vue 条件渲染 -->
   <div v-if="apiData.id">
     {{ apiData.title }}
   </div>
   
   <!-- 或用可选链 -->
   {{ apiData?.title }}
   

   // React 条件渲染
   {apiData.id && <div>{apiData.title}</div>}
   
   // 或用可选链
   <div>{apiData?.title}</div>
   

第二个问题：路由返回时数据不显示，刷新才恢复 #

原因 #

路由切换时组件被复用（比如Vue的keep-alive缓存、React的组件复用优化），组件的初始化钩子（mounted/useEffect）不会重新触发，导致数据请求没有重新执行，旧数据可能已失效或被清空。

解决方法 #

1. 监听路由变化重新请求
   监听路由参数或路径的变化，一旦变化就重新发起数据请求：

   // Vue 示例
   watch: {
     $route() {
       this.fetchProductList()
     }
   },
   mounted() {
     this.fetchProductList()
   },
   methods: {
     async fetchProductList() {
       const res = await axios.get('/api/products')
       this.productList = res.data
     }
   }
   

   // React 示例
   useEffect(() => {
     fetchProductList()
   }, [location.pathname]) // 监听路由路径变化
   
   async function fetchProductList() {
     const res = await axios.get('/api/products')
     setProductList(res.data)
   }
   

2. 禁用组件缓存
   如果不需要组件缓存，可以在路由配置中关闭缓存（Vue），或者移除React的memo包裹：

   // Vue 路由配置示例
   const routes = [
     {
       path: '/products',
       component: ProductList,
       meta: { keepAlive: false } // 禁用缓存
     }
   ]
   

3. 使用路由守卫触发请求
   在组件内的路由守卫中触发请求，确保每次进入页面都能获取最新数据：

   // Vue 示例
   beforeRouteEnter(to, from, next) {
     next(vm => {
       vm.fetchProductList()
     })
   },
   beforeRouteUpdate(to, from, next) {
     this.fetchProductList()
     next()
   }
   

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