uniapp：动态修改页面标题

最新推荐文章于 2025-07-11 09:47:40 发布

原创最新推荐文章于 2025-07-11 09:47:40 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

本文讲述了在Web应用中，如何通过URL参数和JSON编码实现从A页面跳转到B页面时，根据操作类型（新增或修改）动态设置页面标题。通过在跳转前设置特定对象作为参数，B页面解析并判断参数以决定显示新增还是修改的导航栏标题。

我们经常遇到这种情况，点击新增按钮，进入一个空白表单页面，点击修改按钮，其实也是进入这个表单页面，只是表单内容已经被数据库的记录反显了，为了区别页面，我们还需要动态设置页面的标题，让客户知道是在做新增还是在做修改。

首先，在跳转前的url里传递参数，这个参数可以自定义，我这里是传递一个对象，需要先将对象参数转为JSON字符串，并使用encodeURIComponent编码。

A页面

<navigator :url="`${url}?record=${encodeURIComponent(JSON.stringify(item))}`"></navigator>

然后在跳转到的页面接收参数，通过判断这个参数值来确定B页面的标题是修改还是新增。

B页面

onLoad(options) {
			console.log(options);
			let record = {};
			if('record' in options){
				uni.setNavigationBarTitle({
					title: '修改',
				});
			   record = JSON.parse(decodeURIComponent(options.params));
			}else{
				uni.setNavigationBarTitle({
					title: '新增'
				});
			}
		},