uni-app 路由/页面跳转

路由/页面跳转

uni-app 官网 路由

• 简要示范下uni.navigateTo()

  // 不带参数
  let path = '';	// String 
  				// 可以是pages.json中配置的path：'/pages/...'
  				// 也可以是pages文件的相对路径：'./detail'
  uni.navigateTo({url: path})
  
  // 带参数
  // 普通字符串参数
  let msg = 'hello';
  let pathWithStrParam = path + '?data=' + msg;
  
  // 对象参数：使用JSON解析（JSON.stringify(Object)封装；JSON.parse(String)解析）
  let param = { id: 1, msg: 'hello' };
  let pathWithObjParam = path + '?data=' + JSON.stringify(param);
  
  // 参数字符串太长会导致数据传递失败，可以使用以下方法
  let longParam = {...};
  let pathWithLongParam = path + '?data=' + encodeURIComponent(JSON.stringify(longParam ));
  // 拿数据用 decodeURIComponent()
  

• 在新页面获取参数

  <script>
  	export default{
  		onload(_options){
  			// _options就是上一个页面传来的参数
  			console.log(JSON.parse(_options.data));
  			// 长参数
  			JSON.parse(decodeURIComponent(_options.data));
  		}
  	}
  </script>
  

• 需要注意的是，使用uni.navigateTo()进行页面跳转，携带的参数只能在新页面的onload阶段获取。由此可能会引发一些问题：

  <template>
  	<view>
  		<view v-for="(imgPath, index) in this.data.imgPaths" :key="index">
  			<image :src="imgPath" />
  		</view>
  	</view>
  </template>
  
  <script>
  	export default{
  		data(){
  			return {
  				data: null
  			}
  		},
  		onload(_options){
  			this.data = JSON.parse(_options.data);
  		}
  	}
  </script>
  

  • 运行代码会发现，图片能正常加载，但打开控制台，console会出现cannot read imgPath from undefine的错误。原因是在页面渲染模板时已经使用到了data这个数据，而此时页面还未进行到onload阶段，此时的data为初始化的null，不能读取属性。后续onload阶段data的赋值触发数据更新，图片便能正常显示了。
  • 解决方案：使用Vuex管理全局数据