uni-app 路由/页面跳转-蒲公英云

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管理全局数据