uniapp添加404页面

目录结构

创建404文件

文件路径：/pages/error/404.vue

// 404.vue 文件：
<template>
  <view class="error">
    <view class="title">页面迷路了</view>
    <view class="info">1. 请确认访问地址是否有误</view>
    <view class="info">2. 请检查网络环境是否通畅</view>
    <view class="info">3. 关闭广告屏蔽插件后重试</view>
  </view>
</template>

<style lang="scss" scoped>
.error {
  display: flex;
  flex-direction: column;
  height: 80vh;
  padding: 20rpx;

  .title {
    margin-bottom: 100rpx;
    color: #333;
    font-weight: 600;
    font-size: 60rpx;
    text-align: center;
  }

  .info {
    margin-bottom: 20rpx;
    color: #333;
    font-weight: 500;
    font-size: 40rpx;
    text-align: center;
  }
}
</style>

在pages.json配置404路径

"pages": {
    {
      "path": "pages/error/404",
      "style": {}
    }
}
    

设置监听：onPageNotFound

文件路径：/App.vue

<script>
export default {
  // App.vue 文件：
  onPageNotFound: [
    function (res) {
      // 跳转到 404 页面：
      uni.redirectTo({
        url: "/pages/error/404", // 404 页面的路径
      });
    },
  ],
};
</script>

<style scoped>
/*每个页面公共css */
</style>