How to get 404 in uniapp

In mobile applications created based on the uni-app framework, when the user requests a page that does not exist, the application will return a 404 error page by default. In the actual development process, we may need to customize this 404 page to provide a better user experience. Below, this article will introduce in detail the method of obtaining and processing the 404 page in uni-app.

1. Get the 404 page

In uni-app, the method of getting the 404 page is the same as other pages. We only need to create a page named "404" in the pages directory. Create a 404 page in uni-app by executing the following command:

vue create myApp //创建uni-app项目
cd myApp //进入项目目录
mkdir pages/404 //创建404页面文件夹
touch pages/404/index.vue //创建404页面文件

where pages/404/index.vue is the component file of the 404 page. We can add custom 404 page content in this file.

2. Configure 404 page routing

The 404 page needs to be configured in the routing so that the application can correctly identify and return the 404 page. In uni-app, we can add the 404 page route to the "pages" array in the "/pages.json" file. For example:

{
    "pages": [
        //其他页面路由配置
        {
            "path": "pages/404/index",
            "style": {
                "navigationBarTitleText": "404 Not Found"
            }
        }
    ]
}

In the above code, we set the 404 page routing to the "pages/404/index" path, and set the navigation bar title of the 404 page to "404 Not Found".

3. Processing the 404 page

When the user requests a page that does not exist, the application will automatically jump to the 404 page. We can add user-friendly content in 404 page components to provide a better user experience. For example, you can add the following content to the 404 page:

<template>
    <view class="not-found-container">
        <image src="/static/404.png" mode="aspectFit" class="not-found-img"></image>
        <text class="not-found-text">抱歉，页面不存在！</text>
    </view>
</template>

<style lang="scss" scoped>
    .not-found-container {
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .not-found-img {
        width: 200rpx;
        height: 200rpx;
    }
    .not-found-text {
        font-size: 36rpx;
        color: #999;
        margin-top: 40rpx;
    }
</style>

In the above code, we added a 404 page container, and added a 404 image and a 404 prompt text to it.

In addition to prompting the user that the page does not exist, we can also add a button to return to the home page in the 404 page to enhance the user experience. For example, add the following code to the 404 page:

<view class="home-btn" @tap="toHome">
    <image src="/static/home.png" mode="aspectFit"></image>
</view>

<script>
    export default {
        methods: {
            toHome() {
                uni.reLaunch({
                    url: '/pages/index/index'
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .home-btn {
        position: fixed;
        bottom: 40rpx;
        right: 40rpx;
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        background-color: #1890ff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px #999;
    }
    .home-btn image {
        width: 60%;
        height: 60%;
    }
</style>

In the above code, we added a button to return to the home page, and called the uni.reLaunch method in the button's click event to jump to the home page. .

Conclusion

Through the above steps, we can easily obtain the 404 page in uni-app and process it. In practical applications, we can customize the 404 page content according to actual needs and enhance user experience.

The above is the detailed content of How to get 404 in uniapp. For more information, please follow other related articles on the PHP Chinese website!