uni-app 错误路径跳转404实现

创建404页面

404.png

代码如下

<template>
    <view>
        <h1>当前页面不存在</h1>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        onLoad(){  // 两秒钟后 跳转首页（如果不需要可以不加）
            let timer = setTimeout(()=>{
                clearTimeout(timer);
                uni.navigateTo({
                    url: '/pages/index/index'
                });
            }, 2000)
        },
        methods: {
            
        }
    }
</script>

<style>

</style>

pages.json

pagejson.png

代码如下

{
    "pages": [ 
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        },
        {
            "path": "pages/404/404",
            "style": {
                "navigationBarTitleText": "页面未找到", 
                "enablePullDownRefresh": false
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "uniIdRouter": {}
}

vue.app

vueapp.png

代码如下

<script>
    export default {
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        },
        onPageNotFound: function(){
            uni.navigateTo({
                url: '/pages/404/404'
            })
        }
    }
</script>

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