页面路由与路由跳转-CSDN博客

uniapp管理路由的方式：pages.json维护，框架统一管理。

uni-app 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：

path： String类型，用于配置页面路径
style： Object类型，用于配置页面窗口表现，配置项参考uniapp中pageStyle
needLogin：Boolean类型默认false，表示是否需要登录才可访问

pages.json文件中页面路由部分代码示意如下：

"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": ""
			}
		},
		{
			"path": "pages/bill/search",
			"style": {
				"navigationBarTitleText": "账单查询"
			},
			"needLogin": true
		},
		{
			"path": "pages/bill/stats/index",
			"style": {
				"navigationBarTitleText": "统计汇总"
			},
			"needLogin": true
		}

二、路由跳转

1.uniapp的两种路由跳转方式：

使用navigator组件跳转、调用API跳转

2.使用navigator组件跳转：

代码示例：

<!-- open-type为navigate，如果不写open-type跳转方式默认为navigate -->
<navigator :url="url" open-type="navigate">
  <button type="default">跳转到新页面</button>
</navigator>
<!-- open-type为redirect -->
<navigator :url="url" open-type="redirect">
  <button type="default">在当前页打开</button>
</navigator>
<!-- open-type为switchTab -->
<navigator :url="url" open-type="switchTab">
  <button type="default">跳转到tab页面</button>
</navigator>

拓展：open-type的默认值与有效值

open-type 默认值为navigate，其他有效值如下：

值	说明
navigate	保留当前页，跳转到指定页，对应 uni.navigateTo 的功能
redirect	关闭当前页，跳转到指定页，对应 uni.redirectTo 的功能
switchTab	只能用于跳转到tabbar页面，并关闭其他非tabbar页面,tabbar之间做切换，对应 uni.switchTab 的功能
reLaunch	关闭所有页面，打开到应用内的某个页面，对应 uni.reLaunch 的功能
navigateBack	返回，对应 uni.navigateBack 的功能
exit	退出小程序，target="miniProgram"时生效

上述跳转界面的差异：

1.uni.reLaunch

关闭所有页面，然后打开新的页面

类似于重新启动应用，打开的页面栈会被清空，只显示新打开的页面。使用uni.reLaunch方法可以实现整个应用的重定向

2.uni.navigateTo

打开新页面，并将新页面压入页面栈中

被打开的新页面会在页面栈的顶部，用户可以通过返回按钮返回到前一个页面。使用uni.navigateTo方法可以实现页面的跳转导航

3. uni.redirectTo

关闭当前页面，然后打开新的页面

新打开的页面将替换当前页面在页面栈中的位置，用户无法通过返回按钮返回到原先的页面。使用uni.redirectTo方法可以实现页面的替换跳转

4. uni.switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

5.uni.navigateBack

关闭当前页面，返回上一页面或多级页面

uniapp中redirectTo和navigateTo的区别：

navigateTo: （navigate导航）从父页面导航到下一个子页面，然后还可以再回退到父目录，一般默认是最多深入5个页面可以被记录进行回退。
redirectTo：（redirect重定向）在当前页面直接重定向到另一个页面，所以也不存在回退到原页面的情况。

3.调用api跳转

点击事件绑定方法的形式，以uni. 触发跳转方法，并携带对应的url。

代码示例：

export function bindInterceptEveryone () {
    destroyInterceptEveryone()
    intercept = beforeEach(async (to, from ,next) => {
        if (to.url === 'pages/login') {
            afterNotNext(() => {
                // 拦截路由，并且跳转去登录页
                uni.navigateTo({
                    url: '/pages/index/page1',
                    passedParams: {
                        info: '不需要登录，对任何人开放'
                    }
                })
            })
            return // 拦截路由，不执行next
        }
        next()
    })
}

4.返回上一页

uni.navigateBack(OBJECT)：保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

代码示例：

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
uni.navigateTo({
	url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
	url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
// delta 指代返回的页面数。如果大于现有页面数则返回到首页。
uni.navigateBack({
	delta: 2    
});