微信小程序路由详解

最新推荐文章于 2024-05-22 14:28:53 发布

星空里的一颗繁星

最新推荐文章于 2024-05-22 14:28:53 发布

阅读量541

点赞数 1

文章标签：微信小程序小程序 javascript

本文链接：https://blog.csdn.net/qq_43296422/article/details/126546140

版权

navigator

页面链接

属性

open-type

navigate：对应wx.navigateTo的功能

<navigator url="/pages/news/news" open-type="navigate">navigate-----打开新页面	新页面入栈【保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。小程序中页面栈最多十层。】</navigator>

redirect：对应wx.redirectTo的功能

<navigator url="/pages/newscon/newscon" open-type="redirect">redirect-----页面重定向	当前页面出栈，新页面入栈【关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。】</navigator>

switchTab：对应wx.switchTab的功能

<navigator url="/pages/mv/mv" open-type="switchTab">switchTab-----Tab 切换	页面全部出栈，只留下新的 Tab 页面【跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面】</navigator>

reLaunch：对应wx.reLaunch的功能

<navigator url="/pages/mv/mv" open-type="reLaunch">reLaunch-----重加载	页面全部出栈，只留下新的页面【关闭所有页面，打开到应用内的某个页面(包括Tab页面)】</navigator>

navigateBack：对应wx.navigateBack的功能

<navigator open-type="navigateBack">navigateBack----页面返回	页面不断出栈，直到目标返回页【关闭当前页面，返回上一页面或多级页面。】</navigator>

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

属性

url：需要跳转的 tabBar 页面的路径 (代码包路径)（需在 app.json 的tabBar字段定义的页面），路径后不能带参数。

<button bindtap="switchTab">wx.switchTab-----Tab 切换	页面全部出栈，只留下新的 Tab 页面【跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面】</button>

  //switchTab为函数名，通过事件调用函数，触发链接跳转
  switchTab(){
    wx.switchTab({
      url: '/pages/mv/mv'
    })
  }

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

属性

url：需要跳转的应用内页面路径 (代码包路径)，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'

<button bindtap="reLaunch">wx.reLaunch-----重加载	页面全部出栈，只留下新的页面【关闭所有页面，打开到应用内的某个页面(包括Tab页面)】</button>

  //reLaunch为函数名，通过事件调用函数，触发链接跳转
  reLaunch(){
    wx.reLaunch({
      url: '/pages/search/search',
    })
  }

功能：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

属性

<button bindtap="redirect">redirect-----页面重定向	当前页面出栈，新页面入栈【关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。】</button>

  //redirect为函数名，通过事件调用函数，触发链接跳转
  redirect(){
    wx.redirectTo({
      url: '/pages/newscon/newscon'
    })
  }

功能：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。小程序中页面栈最多十层。

属性

<button bindtap="navigate">wx.navigateTo-----打开新页面	新页面入栈【保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。小程序中页面栈最多十层。】</button>

  //navigate为函数名，通过事件调用函数，触发链接跳转
  navigate(){
    wx.navigateTo({
      url: '/pages/news/news'
    })
  }

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

属性

delta：返回的页面数，如果 delta 大于现有页面数，则返回到首页。

 <button bindtap="navigateBack">wx.navigateBack----页面返回	页面不断出栈，直到目标返回页【关闭当前页面，返回上一页面或多级页面。】</button>

  //navigateBack为函数名，通过事件调用函数，触发链接跳转
  navigateBack(){
    wx.navigateBack({
      delta: 1,
    })
  }

关注