uni-app教程四UniAPP 路由配置及页面跳转

Posted 2023-04-09 我有满天星辰

四、UniAPP 路由配置及页面跳转

(1) 路由配置

uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在 app.json 中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同，如仍希望采用 Vue Router 方式管理路由，可在插件市场搜索 Vue-Router。

	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		
			"path": "pages/index/index",
			"style": 
				"navigationBarTitleText": "路由配置",
				"navigationBarBackgroundColor": "#FFFFFF",
				"navigationBarTextStyle": "black",
				"backgroundColor": "#FFFFFF",
				"enablePullDownRefresh": true
			
		,
		
			"path": "pages/list/list",
			"style": 
				"navigationBarTitleText": "路由配置2",
				"navigationBarBackgroundColor": "#FFFFFF",
				"navigationBarTextStyle": "black",
				"backgroundColor": "#FFFFFF",
				"enablePullDownRefresh": true
			
		
	],

(2) 路由跳转

uni-app 有两种页面路由跳转方式：使用 navigator组件跳转（标签式导航）、调用 API跳转（编程式导航)
框架以栈的形式管理当前所有页面，当发生路由切换的时候，页面栈的表现如下：

页面栈

框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表现如下：

路由方式	页面栈表现	触发时机
初始化	新页面入栈	uni-app 打开的第一个页面
打开新页面	新页面入栈	调用 API uni.navigateTo 、使用组件
页面重定向	当前页面出栈，新页面入栈	调用 API uni.redirectTo 、使用组件
页面返回	页面不断出栈，直到目标返回页	调用 API uni.navigateBack 、使用组件 、用户按左上角返回按钮、安卓用户点击物理back按键
Tab 切换	页面全部出栈，只留下新的 Tab 页面	调用 API uni.switchTab 、使用组件 、用户切换 Tab
重加载	页面全部出栈，只留下新的页面	调用 API uni.reLaunch 、使用组件

(3)获取当前页面栈

getCurrentPages0函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个
元素为当前页面，
注意：getCurrentPages 仅用于展示页面栈的情况，请勿修改页面栈，以免造成页面状态错误。

(4)路由传参与接收

说明：页面生命周期的 onLoad()监听页面加载，其参数为上个页面传递的数据，如

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo(
	url: 'test?id=1&name=uniapp'
);

url为将要跳转的页面路径，路径后可以带参数。参数与路径之间使用 ？分隔，参数键与参数值用 = 相连，不同参数用 & 分隔。如 'path?key1=value1&key2=value2' ，path为下一个页面的路径。下一个页面的onLoad函数可得
到传递的参数。

// 在test.vue页面接受参数
export default 
	onLoad: function (option)  //option为object类型，会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
		console.log(option.name); //打印出上个页面传递的参数。
	

起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据

// 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
uni.navigateTo(
  url: 'pages/test?id=1',
  events: 
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) 
      console.log(data)
    ,
    someEvent: function(data) 
      console.log(data)
    
    ...
  ,
  success: function(res) 
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage',  data: 'data from starter page' )
  
)

// 在test.vue页面，向起始页通过事件传递数据
onLoad: function(option) 
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.emit('acceptDataFromOpenedPage', data: 'data from test page');
  eventChannel.emit('someEvent', data: 'data from test page for someEvent');
  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) 
    console.log(data)
  )

url有长度限制，太长的字符串会传递失败，可改用窗体通信、全局变量，另外参数中出现空格等特殊字符时需要对参数进行编码，如下为使用encodeURIComponent对参数进行编码的示例。

<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))"></navigator>

// 在test.vue页面接受参数
onLoad: function (option) 
	const item = JSON.parse(decodeURIComponent(option.item));

注意：

• 页面跳转路径有层级限制，不能无限制跳转新页面
• 跳转到 tabBar 页面只能使用 switchTab 跳转
• 路由API的目标页面必须是在pages.json里注册的vue页面。如果想打开web url，在App平台可以使用 plus.runtime.openURL或web-view组件；H5平台使用 window.open；小程序平台使用web-view组件（url需在小程序的联网白名单中）。在hello uni-app中有个组件ulink.vue已对多端进行封装，可参考。

(5)小程序路由分包配置

因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。
所谓的主包，即放置默认启动页面及 TabBar 页面，而分色则是根据 pages.json 的配置进行划分。
在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下整下来，下载完成后再进行展示，此时终端界面会有等待提示。

分包内静态文件示例

"subPackages": [
	"root": "pages/sub",
	"pages": [
		"path": "index/index"
	]
]

以上面的分包为例，放在每个分包root对应目录下的静态文件会被打包到此分包内。

预下载分包设置

	"pages": [
		"path": "pages/index/index",
		"style":  ...
	, 
		"path": "pages/login/login",
		"style":  ...
	],
	"subPackages": [
		"root": "pagesA",
		"pages": [
			"path": "list/list",
			"style":  ...
		]
	, 
		"root": "pagesB",
		"pages": [
			"path": "detail/detail",
			"style":  ...
		]
	],
	"preloadRule": 
		"pagesA/list/list": 
			"network": "all",
			"packages": ["__APP__"]
		,
		"pagesB/detail/detail": 
			"network": "all",
			"packages": ["pagesA"]
		
	

uni-app 页面跳转，页面刷新等问题总结

参考技术A 1.当从子页面退回到父级也面时，调用

                      uni.navigateBack(

                            delta: 1 // 代表返回上 1 页

                        )

这个方法不能刷新父级页面，只需在父级页面调用

    onShow()

            this.刷新方法();

           

这样有个不好的地方就是每次返回就会调用 onShow方法，

2.页面跳转的方法  

                uni.navigateTo(

                            url: '页面位置'+'?要传的数据键='值

                       );

接收的方法

                 onLoad(e)

                           值= e.要传的数据键

                    ,