uniapp小程序页面跳转

一、准备工作：

1. 在项目文件夹下的pages文件夹中新建.vue的页面，例如 difficulty.vue 和 hell.vue

2. 在pages.json中放置好所有需要用到的页面

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages

            {        //路径
                    "path": "pages/index/difficulty",
                    "style": {
                               //页面中的标题
                        "navigationBarTitleText": "困难模式"
                    }
                },
                {
                        "path": "pages/index/hell",
                        "style": {
                            "navigationBarTitleText": "地狱模式"
                        }
                    }
        
    ],
    //设置默认页面的窗口表现  非必填
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "uniIdRouter": {}
}

二、页面跳转

方法一： uni.navigateTo

                  uni.navigateTo({
                        // 页面地址
                    url: '/pages/index/hell'
                 });

使用 uni.navigateTo跳转时，会保留当前页相当于有历史页面，回退时会退回上一层的页面，一般推荐使用在首页面中，例如主页面中有按钮，分别跳到不同页，回退时直接回到首页

方法二：uni.redirectTo

                        
                       uni.redirectTo({
                           url: '/pages/index/hell'
                        });

使用uni.redirectTo跳转，当页面回退时，直接跳回首页

三、返回

uni.navigateBack

        // 在第三层页面中写navigateBack，delta: 2时会返回第一层页面
         uni.navigateBack({
          //可以理解为往上返两层
            delta: 2
       });

使用uni.navigateBack可以关闭当前页面，返回上一页面或返回上多层页面

持续更新中。。。。。