uni-app 如何处理404/怎么自定义访问不存在的页面

前言

  • uni-app
  • 若依移动版

怎么会遇到不存在的页面?

1,过了N天后,分享链接所对应的页面不存在了。当再次访问该分享链接时,会遇到不存在的页面。H5、小程序均会遇到此情况。
2,熟悉网络知识的用户,伪造一个不存在的链接。H5、小程序均会遇到此情况。

访问一个不存在的页面会是什么样子?

如果为对此情况进行过任何处理,目前uni-app默认显示空白页面,什么也没有

怎么自定义访问不存在的页面

App.vue页面有个onPageNotFound方法,用来处理这种情况。

我(的若依移动版)是这样修改的:

<script>
  import config from './config'
  import store from '@/store'
  import {
    
     getToken } from '@/utils/auth'
  import Vue from 'vue'
  export default {
    
    
    onLaunch: function() {
    
    
      this.initApp()
    },
	onShow: function() {
    
    
		console.log('App Show')
	},
	onHide: function() {
    
    
		console.log('App Hide')
	},
	onPageNotFound: function(params) {
    
    
		console.log('App onPageNotFound, params', params)
		this.$tab.reLaunch('/pages/login') 
	},
    methods: {
    
    
      // 初始化应用
      initApp() {
    
    
        // 初始化应用配置
        this.initConfig()
        // 检查用户登录状态
        //#ifdef H5
        //this.checkLogin()
        //#endif
      },
      initConfig() {
    
    
        this.globalData.config = config
      },
      checkLogin() {
    
    
         if (!getToken()) {
    
    
          this.$tab.reLaunch('/pages/login') 
         }
      }
    }
  }
</script>

<style lang="scss">
  // @import '@/static/scss/index.scss';
  @import "uview-ui/index.scss";
  @import "colorui/main.css";
  @import "colorui/icon.css";
</style>

参考

https://ask.dcloud.net.cn/question/101237
https://github.com/dcloudio/uni-app/issues/1743

猜你喜欢

转载自blog.csdn.net/sayyy/article/details/130686245