uni-app 路由与页面跳转

文章目录

保留当前页面，跳转到应用内的某个页面
关闭当前页面，跳转到应用内的某个页面
关闭所有页面，打开到应用内的某个页面
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
关闭当前页面，返回上一页面或多级页面
窗口动画

关键点

跳转到 tabBar 页面只能使用 switchTab 跳转
navigateTo, redirectTo 只能打开非 tabBar 页面
switchTab 只能打开 tabBar 页面
reLaunch 可以打开任意页面
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar
不能在 App.vue 里面进行页面跳转

保留当前页面，跳转到应用内的某个页面

/*
* uni.navigateTo(OBJECT):保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
* url   需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，
* 参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'，path为下一个页面的路径，
* 下一个页面的onLoad函数可得到传递的参数
* 
*/
uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});
// test.vue
export default {
    onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }
}

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

/*
*  uni.redirectTo(OBJECT)
* url  需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，
* 不同参数用&分隔；如 'path?key=value&key2=value2'
*/
uni.redirectTo({
    url: 'test?id=1'
});

关闭所有页面，打开到应用内的某个页面

/*
*  uni.reLaunch(OBJECT)
* url  需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；
* 如 'path?key=value&key2=value2'，如果跳转的页面路径是 tabBar 页面则不能带参数
*/
uni.reLaunch({
    url: 'test?id=1'
});
export default {
    onLoad: function (option) {
        console.log(option.id);
    }
}

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

/*
*  url 需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数
*/

//pages.json
{
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    },{
      "pagePath": "pages/other/other",
      "text": "其他"
    }]
  }
}

//other.vue
uni.switchTab({
    url: '/pages/index/index'
});

关闭当前页面，返回上一页面或多级页面

/*
* uni.navigateBack(OBJECT)  : 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
*  delta 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
*/
// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
uni.navigateTo({
    url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
    url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
    delta: 2
});

窗口动画

窗口的显示/关闭动画效果，支持在 API、组件、pages.json 中配置，优先级为：API = 组件 > pages.json

/*
* API
* 有效的路由 API
* navigateTo
* navigateBack
*/
uni.navigateTo({
    url: '../test/test',
    animationType: 'pop-in',
    animationDuration: 200
});
uni.navigateBack({
    delta: 1,
    animationType: 'pop-out',
    animationDuration: 200
});

/*
* 组件
* open-type 有效值
* navigateTo
* navigateBack
*/
<navigator animation-type="pop-in" animation-duration="300" url="../test/test">navigator</navigator>
<navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack" >navigator</navigator>

/*
* pages.json
* pages.json 中配置的是窗口显示的动画
*/
"style": {
    "app-plus": {
        "animationType": "fade-in",
        "animationDuration": 300
    }
}