14 页面跳转方式

1. uView框架封装后的路由跳转方法 this.$u.route()

// 参数 通过 params 传递
this.$u.route({
  url: 'pages/components/empty/index',
  params: {
    name: 'lisa'
  }
})
// 跳转后的界面 获取传递参数的方式
onLoad(options) {
  this.optName = options.name;
},

2. 使用 uni-app 跳转方法

注意点:

• 页面跳转路径有层级限制，不能无限制跳转新页面
• 跳转到 tabBar 页面只能使用 switchTab 跳转
• 路由API的目标页面必须是在pages.json里注册的vue页面。如果想打开web url，在App平台可以使用 plus.runtime.openURL或web-view组件；H5平台使用 window.open；小程序平台使用web-view组件（url需在小程序的联网白名单中）。在hello uni-app中有个组件ulink.vue已对多端进行封装，可参考。

  uni.navigateTo(OBJECT) https://uniapp.dcloud.io/api/router?id=navigateto

  保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

  //在起始页面跳转到test.vue页面并传递参数
  // 参数传递 是拼接在 url上面的
  // 路径的配置 和 this.$u.route 略有不同
  uni.navigateTo({
    url: '/pages/login/index?id=1&name=uniapp'
  });

  uni.redirectTo(OBJECT) https://uniapp.dcloud.io/api/router?id=redirectto

  关闭当前页面，跳转到应用内的某个页面。

  uni.redirectTo({
    url: '/test?id=1'
  });

  举例：A跳转到B ； 跳转之后，用户点击返回按钮，不需要再回到A 界面，可以使用 redirectTo

uni.navigateBack(OBJECT)

https://uniapp.dcloud.io/api/router?id=navigateback

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

// 返回上一级，并且执行上一级界面的 onLoad 生命周期
uni.navigateBack({
  success: () => {
    let page = getCurrentPages().pop();
    if (!page) return;
    page.onLoad();
  },
});