微信小程序路由介绍

一、哪些会触发页面跳转

1.小程序启动，初始化第一个页面

2.跳转新页面，调用wx.navigateTo 或者组件

3.页面重定向，调用wx.redirectTo 或者组件

4.页面返回，调用wx.navigateBack ,页面左上角返回按钮

5.wx.switchTab实现tabBar页面切换

{
    "pages": [
        "pages/index/index",
        "pages/search/search",
        "pages/MV/MV",
        "pages/user/user",  
    ]
}

二、微信小程序中实现页面路由的几种方式

Tips:首先利用bingtap（）创建点击函数

1. wx.navigateTo，保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面

play(){
    wx.navigateTo({
        url: 'pages/search/search',
        success: function(res) {},
 
    })   
}

2. wx.redirectTo,关闭当前页面，跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面

play(){
    wx.redirectTo({
        url: 'pages/search/search',
        success: function(res) {},
 
    })   
}

3. 组件方式跳转

更多 >

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

play(){
    wx.navigateBack({
    delta: 1,
   }) 
}

Tips: delta为1时表示返回上一页，为2时表示上上一页，以此类推；如果dalta大于已打开的页面总数，则返回到首页。返回后，元界面会销毁

5. wx.switchTab跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

// app.json
{
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    },{
      "pagePath": "pages/search/search",
      "text": "搜索"
    }]
  }
}
 
//js
wx.switchTab({
  url: '/pages/search/search'
})

6. wx.reLaunch(先关闭所有页面，再跳转任何页面包括tabBar，可传参)

play(){
    wx.reLaunch({
        url: 'pages/search/search',
        success: function(res) {},
 
    })   
}

三、wx.redirectTo和wx.navigateTo的区别

1. wx. redirectTo()会使当前界面进入unload状态，即关闭该页面，将无法回到当前页面。

2. wx.navigateTo()导航到另一个页面，会将当前的页面隐藏起来，使页面进入hide状态，并不会关闭可以通过返回按钮回到当前的页面。

上一篇：微信小程序怎么通过点击事件传递参数

下一篇：前端实现微信小程序信用分免押（也称微信分免押）

微信小程序路由介绍

推荐标签

下载该资源用户也下载了

签到成功!