uni-app 路由/页面跳转

今天药忘吃喽~ 2023-02-12 05:42 70阅读 0赞

路由/页面跳转

uni-app 官网 路由

  • 简要示范下uni.navigateTo()

    1. // 不带参数
    2. let path = ''; // String
    3. // 可以是pages.json中配置的path:'/pages/...'
    4. // 也可以是pages文件的相对路径:'./detail'
    5. uni.navigateTo({ url: path})
    6. // 带参数
    7. // 普通字符串参数
    8. let msg = 'hello';
    9. let pathWithStrParam = path + '?data=' + msg;
    10. // 对象参数:使用JSON解析(JSON.stringify(Object)封装;JSON.parse(String)解析)
    11. let param = { id: 1, msg: 'hello' };
    12. let pathWithObjParam = path + '?data=' + JSON.stringify(param);
    13. // 参数字符串太长会导致数据传递失败,可以使用以下方法
    14. let longParam = { ...};
    15. let pathWithLongParam = path + '?data=' + encodeURIComponent(JSON.stringify(longParam ));
    16. // 拿数据用 decodeURIComponent()
  • 在新页面获取参数

    1. <script>
    2. export default{
    3. onload(_options){
    4. // _options就是上一个页面传来的参数
    5. console.log(JSON.parse(_options.data));
    6. // 长参数
    7. JSON.parse(decodeURIComponent(_options.data));
    8. }
    9. }
    10. </script>
  • 需要注意的是,使用uni.navigateTo()进行页面跳转,携带的参数只能在新页面的onload阶段获取。由此可能会引发一些问题:

    1. <template>
    2. <view>
    3. <view v-for="(imgPath, index) in this.data.imgPaths" :key="index">
    4. <image :src="imgPath" />
    5. </view>
    6. </view>
    7. </template>
    8. <script>
    9. export default{
    10. data(){
    11. return {
    12. data: null
    13. }
    14. },
    15. onload(_options){
    16. this.data = JSON.parse(_options.data);
    17. }
    18. }
    19. </script>
    • 运行代码会发现,图片能正常加载,但打开控制台,console会出现cannot read imgPath from undefine的错误。原因是在页面渲染模板时已经使用到了data这个数据,而此时页面还未进行到onload阶段,此时的data为初始化的null,不能读取属性。后续onload阶段data的赋值触发数据更新,图片便能正常显示了。
    • 解决方案:使用Vuex管理全局数据

发表评论

表情:
评论列表 (有 0 条评论,70人围观)

还没有评论,来说两句吧...

相关阅读