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管理全局数据
还没有评论,来说两句吧...