uni-app设置页面不存在时跳转到指定页面

使用uni-app的页面不存在事件

uni-app提供了onPageNotFound事件,可以在App.vue中监听这个事件,并在事件触发时执行跳转。

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
        onPageNotFound: function(params) {
            console.log("params.path", params.path);
            // 使用uni.redirectTo进行无动画的页面跳转
            uni.redirectTo({
                url: '/pages/notFound/notFound'
            });
        }
	}
</script>

在index.html中添加跳转

在index.html中添加script脚本,判断当前url,如果是出错的url,则跳转到正确的url上。

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="/assets/uni.c2b119df.css">

    <meta charset="UTF-8" />
    <script>
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
        CSS.supports('top: constant(a)'))
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
    </script>
    <title>标题</title>
    <script type="module" crossorigin src="/assets/index-C9NPpYnI.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-HKh35y-j.css">
  </head>
  <body>
    <div id="app"><!--app-html--></div>
  </body>
  <script>
        var currentUrl = window.location.href;
        if (currentUrl.includes('ceshi/ceshi')) {
            var timestamp = new Date().getTime();
            window.location.href = 'https://www.demo.com/ceshi.html?timestamp=' + timestamp;
        }
    </script>
</html>

uni-app 中,页面跳转是常见的功能之一,主要用于实现页面之间的导航和交互。根据同的需求和场景,uni-app 提供了多种页面跳转方式,主要包括以下几种方法: ### 1. 使用 `<navigator>` 组件 `<navigator>` 是 uni-app 提供的内置组件,用于在页面模板中实现跳转,类似于 HTML 中的 `<a>` 标签。它支持多种跳转类型,并且适用于大多数页面导航场景。 - **普通跳转**:使用 `open-type="navigate"` 实现跳转到非 tabBar 页面。 ```html <navigator url="/pages/detail/detail?id=123" open-type="navigate">跳转到详情页</navigator> ``` - **跳转到 tabBar 页面**:使用 `open-type="switchTab"` 实现跳转到 tabBar 页面。 ```html <navigator url="/pages/home/home" open-type="switchTab">跳转到首页</navigator> ``` ### 2. 使用 JavaScript API 实现跳转 uni-app 提供了一系列 JavaScript API 来实现页面跳转,这些 API 更适合在逻辑处理中动态控制页面导航。 - **`uni.navigateTo`**:保留当前页面跳转到新页面,用户可以通过返回按钮返回上一页。 ```javascript uni.navigateTo({ url: '/pages/detail/detail' }); ``` - **`uni.redirectTo`**:关闭当前页面跳转到非 tabBar 页面,用户无法通过返回按钮返回到原页面。 ```javascript uni.redirectTo({ url: '/pages/login/login' }); ``` - **`uni.switchTab`**:跳转到 tabBar 页面,同关闭其他非 tabBar 页面。 ```javascript uni.switchTab({ url: '/pages/home/home' }); ``` - **`uni.reLaunch`**:关闭所有页面,打开指定页面,常用于重新加载应用主界面。 ```javascript uni.reLaunch({ url: '/pages/index/index' }); ``` - **`uni.navigateBack`**:返回上一级页面指定层级的页面。 ```javascript uni.navigateBack({ delta: 1 // 返回上一级页面 }); ``` ### 3. 使用 `<uni-link>` 组件 `<uni-link>` 是 uni-app 的扩展组件,可以实现页面跳转,通常用于需要携带参数的情况。 ```html <uni-link href="../index/index?para=1688" text="Go to another page (uni-link)"></uni-link> ``` 该组件支持传参,并且在跨平台兼容性上有更好的表现。 ### 4. 页面传参与接收参数 页面跳转,可以通过 URL 携带参数,例如: ```html <navigator url="/pages/detail/detail?id=123&name=test">跳转到详情页</navigator> ``` 目标页面可以通过 `onLoad` 生命周期函数接收参数: ```javascript onLoad(options) { console.log(options.id); // 输出 123 console.log(options.name); // 输出 test } ``` ### 5. 跳转方式的区别 - **`navigateTo` 和 `navigateBack`**:适用于需要保留页面栈并允许用户返回的场景。 - **`redirectTo`**:适用于替换当前页面需要用户返回的场景。 - **`switchTab`**:专门用于跳转到 tabBar 页面- **`reLaunch`**:适用于需要完全重置页面栈的场景,比如从深层页面直接跳转到首页。 ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值