uniapp 404页面

发布时间 2023-11-11 13:36:43作者: haonanElva

需求:uniapp 在写 H5 时,如果在地址栏乱输入,会跳转到 404 页面。

思路:uniapp 有个 应用生命周期 onPageNotFound,让跳转不存在的页面时会执行这个回调函数。所以需求就很好解决了!

具体操作:

第一步:写一个 404 页面,并在 pages.json 中配置其路由。

第二步:在 App.vue 的 onPageNotFound 生命周期中处理跳转到 404 页面的逻辑:

onLaunch: function() {
            console.log('App Launch')
            // uni.hideTabBar();
            // #ifdef APP-PLUS
                
            // #endif
        },
        onPageNotFound() {
            uni.switchTab({
                url: '/pages/tabBar/home/home'
            })
        },
        onShow: function() {
            
        },