uniapp怎么获取404

1. 什么是uniapp

uniapp是一款基于Vue.js框架的跨平台开发框架，可以用一套代码同时生成iOS、Android和H5应用程序，是目前市场上综合性最强的跨平台开发框架之一。它具有一些Vue特性，如Vue组件、Vue生命周期等，同时也具有专属的uni特性。使用uniapp可以极大地提高开发效率和节省开发成本，是目前很多企业和开发者的首选。

2. 什么是404

404是指请求的页面或资源不存在的状态码，常见于网页浏览器中。当我们在打开网页或点击链接时，如果服务器无法找到目标页面或资源，就会返回404状态码，提示用户请求的资源不存在。

3. uniapp获取404的情况

在进行uniapp开发时，我们也会遇到404错误的情况。比如，在进行路由跳转时，如果输入了错误的页面地址，或者目标页面不存在，就会返回404错误。

3.1 uniapp页面跳转

在uniapp中，页面跳转通过uni.navigateTo或者uni.redirectTo方法实现。这两个方法的区别在于，前者可以返回上一个页面，后者不可以。

使用uni.navigateTo跳转到目标页面时，如果目标页面不存在，就会返回404错误。我们可以通过在目标页面中使用onLoad生命周期函数获取父页面传递过来的数据，如果没有获取到则说明页面跳转出现了问题。

//父页面跳转子页面
uni.navigateTo({
  url: '/pages/child/child?id=123'
})
//子页面中读取父页面传递的数据
export default {
  onLoad (options) {
    if (options && options.id) {
      this.id = options.id
    } else {
      console.log('获取数据失败')
    }
  }
}

3.2 uniapp路由配置

在uniapp中，页面路由配置放在pages.json文件中。如果我们在pages.json中配置了不存在的页面，就会返回404错误。

//pages.json中配置的路由
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/detail/detail",
      "style": {
        "navigationBarTitleText": "详情页"
      }
    },
    {
      "path": "pages/404/404",
      "style": {
        "navigationBarTitleText": "404页面"
      }
    }
  ]
}

上述代码中，我们在pages.json中配置了一个名为404的页面，当我们跳转到不存在的页面时，就可以跳转到这个404页面。但是需要注意的是，我们需要在App.vue文件中全局捕获404错误，并跳转到404页面。

//在App.vue中全局捕获404错误
export default {
  onError (error) {
    console.log(error)
    if (error && error.statusCode === 404) {
      uni.redirectTo({
        url: '/pages/404/404'
      })
    }
  }
}

4. 总结

uniapp是一款跨平台开发框架，可以方便地生成iOS、Android和H5应用程序。在进行uniapp开发时，我们可能会遇到404错误的情况。这时，我们需要注意页面跳转、路由配置等问题，并在App.vue文件中全局捕获错误，优化用户体验。