uniapp跳转页面详解

一、uniapp跳转页面报错

在uniapp开发过程中，可能会遇到页面跳转时出现报错的情况。这种情况可能是因为路由配置出错或页面路径不正确导致的。

首先，需要检查uniapp的路由配置是否正确。在uniapp中，我们使用uni-navitagtion组件来进行页面的跳转。该组件有两种配置方式：静态配置和动态配置。在静态配置中，所有页面的跳转关系都需要手动配置到路由表中。在动态配置中，跳转的页面路径是通过参数传递的。在进行路由配置时，需要注意格式的正确性。示例如下：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {}
    },
    {
      "path": "pages/about/about",
      "style": {}
    }
  ],
  "window": {
    "navigationBarTitleText": "uniapp demo"
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#555",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/about/about",
        "text": "关于我们",
        "iconPath": "static/tabbar/about.png",
        "selectedIconPath": "static/tabbar/about-active.png"
      }
    ]
  }
}

其次，如果路由配置正确，检查跳转的页面路径是否正确，路径大小写和文件后缀名需要保持一致。如果都检查无误还是出现跳转报错，可以通过在跳转时打印日志进行排查。示例如下：

// 在跳转页面前添加以下代码
console.log("跳转路径为：" + path);

uni.navigateTo({
  url: path
})

二、uniapp如何跳转页面和传参

在uniapp中，我们可以使用uni.navigateTo、uni.redirectTo、uni.switchTab、uni.reLaunch四种方式来进行页面跳转。其中，uni.navigateTo和uni.redirectTo可以传递参数，uni.switchTab和uni.reLaunch不支持传递参数，只能直接跳转到目标页面。

下面是使用uni.navigateTo进行页面跳转并传递参数的示例：

uni.navigateTo({
  url: '/pages/article/article?id=123&title=uni-app教程',
  success: function (res) {
    console.log('打开新页面成功！');
  }
});

在跳转时需要指定目标页面的路径，并在路径后面添加参数。参数的格式为key=value，可以同时传递多个参数，参数之间使用&符号进行分割。在目标页面可以通过uni.getStorageSync或uni.getStorage读取传递过来的参数值。

三、uniapp跳转页面状态

在uniapp中，页面跳转可以是同步的，也可以是异步的。异步跳转可以通过success和fail回调函数进行处理，使用同步跳转时不需要回调函数。示例如下：

// 同步跳转
uni.navigateTo({
  url: '/pages/article/article',
  complete: function () {
    // 页面跳转完成后的回调函数
    console.log('页面跳转完成！');
  }
});

// 异步跳转
uni.navigateTo({
  url: '/pages/article/article',
  success: function (res) {
    // 跳转成功后的回调函数
    console.log('跳转成功！');
  },
  fail: function (res) {
    // 跳转失败后的回调函数
    console.log('跳转失败！');
  }
});

四、uniapp跳转页面并且刷新

在uniapp中，可以通过监听页面生命周期函数onShow来实现页面刷新。当页面从后台切换到前台时，onShow函数会被调用，可以在该函数中实现页面的业务逻辑。

下面是在页面跳转后刷新目标页面的示例：

// 页面A中的跳转函数
goToPageB: function () {
  uni.navigateTo({
    url: '/pages/pageB/pageB',
    success: function () {
      // 刷新页面B
      var pageB = getCurrentPages()[getCurrentPages().length - 1];
      pageB.onShow();
    }
  });
}

在跳转时添加success回调函数，在回调函数中获取当前页面实例，调用onShow函数即可实现页面刷新。

五、uniapp跳转页面传参数

在uniapp中，可以通过在跳转时传递参数来实现页面之间的数据交互。在目标页面可以通过uni.getStorageSync或uni.getStorage读取传递过来的参数值，并在页面中进行操作。

下面是在页面之间传递数据的示例：

// 页面A中的跳转函数
goToPageB: function () {
  uni.navigateTo({
    url: '/pages/pageB/pageB?id=123&title=uni-app教程'
  });
}

// 页面B中读取参数
onLoad: function (options) {
  console.log(options.id);
  console.log(options.title);
}

在跳转时需要指定目标页面的路径，并在路径后面添加参数。在页面B中可以通过options参数获取传递过来的参数值。

六、uniapp跳转页面如何携带参数

在uniapp中，可以通过uni-setStorageSync或uni.setStorage来设置参数值，然后在跳转时通过查询字符串的方式将参数值传递到目标页面。在目标页面可以通过uni.getStorageSync或uni.getStorage读取传递过来的参数值。

下面是在页面间携带参数的示例：

// 在页面A中设置参数值
uni.setStorageSync('key', 'value');

// 在跳转时携带参数
uni.navigateTo({
  url: '/pages/pageB/pageB?key=' + uni.getStorageSync('key')
});

// 在页面B中读取参数
onLoad: function () {
  console.log(uni.getStorageSync('key'));
}

在页面A中通过uni-setStorageSync或uni.setStorage设置参数值，然后在跳转时通过查询字符串的方式将参数值传递到目标页面。在目标页面可以通过uni.getStorageSync或uni.getStorage读取传递过来的参数值。

七、uniapp跳转页面的方式

在uniapp中，可以使用四种方式进行页面跳转：uni.navigateTo、uni.redirectTo、uni.switchTab、uni.reLaunch。

其中，uni.navigateTo和uni.redirectTo都是普通的页面跳转方式，可以在跳转时携带参数。uni.navigateTo是非底部选项卡页面跳转方式，可以返回上一页面；而uni.redirectTo是非底部选项卡页面替换式跳转方式，不能返回上一页面。

uni.switchTab是底部选项卡页面跳转方式，不能携带参数，可以返回到底部选项卡页面；uni.reLaunch是页面重启式跳转方式，可以携带参数，但无法返回前面的页面。

八、uniapp跳转页面传对象

在uniapp中，可以通过uni-setStorageSync或uni.setStorage来设置对象参数值，然后在跳转时通过查询字符串的方式将参数值传递到目标页面。

下面是在页面间携带对象参数的示例：

// 在页面A中设置参数值
var obj = {
  name: '张三',
  age: 18
};
uni.setStorageSync('obj', JSON.stringify(obj));

// 在跳转时携带参数
uni.navigateTo({
  url: '/pages/pageB/pageB?key=' + uni.getStorageSync('obj')
});

// 在页面B中读取参数
onLoad: function () {
  console.log(JSON.parse(uni.getStorageSync('obj')));
}

在页面A中通过uni-setStorageSync或uni.setStorage设置对象参数值，然后在跳转时通过JSON.stringify将对象转换成字符串，并通过查询字符串的方式将参数值传递到目标页面。在目标页面可以通过JSON.parse和uni.getStorageSync或uni.getStorage读取传递过来的参数值。