# 微信小程序--路由

# 一、页面路由

• 在小程序中所有页面的路由全部由框架进行管理
• 框架以栈的形式维护了当前的所有页面

# 二、路由组件--导航

• navigator 页面链接

编号|属性|类型|默认值|必填|说明 ---|---|---|---|---|---|--- 1|target|string|self|否|在哪个目标上发生跳转，默认当前小程序 1|url|string||否|当前小程序内的跳转链接 2|open-type|string|navigate|否|跳转方式 3|delta|number|1|否|当 open-type 为 'navigateBack' 时有效，表示回退的层数 4|app-id|string||否|当target="miniProgram"时有效，要打开的小程序 5|path|string||否|当target="miniProgram"时有效，打开的页面路径，如果为空则打开首页 6|extra-data|object||否|当target="miniProgram"时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch()，App.onShow() 中获取到这份数据。 7|version|string|release|否|当target="miniProgram"时有效，要打开的小程序版本 8|hover-class|string|navigator-hover|否|指定点击时的样式类，当hover-class="none"时，没有点击态效果 9|hover-stop-propagation|boolean|false|否|指定是否阻止本节点的祖先节点出现点击态 10|hover-start-time|number|50|否|按住后多久出现点击态，单位毫秒 11|hover-stay-time|number|600|否|手指松开后点击态保留时间，单位毫秒 12|bindsuccess|string||否|当target="miniProgram"时有效，跳转小程序成功 13|bindfail|string||否|当target="miniProgram"时有效，跳转小程序失败 14|bindcomplete|string||否|当target="miniProgram"时有效，跳转小程序完成

• target 的合法值

• open-type 的合法值

先配置页面和按钮

"pages":[
    "pages/nav/1",
    "pages/nav/2",
    "pages/nav/3",
    "pages/nav/4",
    "pages/nav/5",
    "pages/nav/6",
    "pages/nav/7"
],
"tabBar":{
    "color":"#000000",
    "selectedColor":"#aa33aa",
    "backgroundColor":"#ffffff",
    "borderStyle":"black",
    "list":[
        {
            "pagePath":"pages/nav/1",
            "text":"1号页面"
        },
        {
            "pagePath":"pages/nav/2",
            "text":"2号页面"
        },
        {
            "pagePath":"pages/nav/3",
            "text":"3号页面"
        }
    ]
},

<view>这是1页面</view>
<navigator url="2" open-type="switchTab">跳转2页面，tabBar按钮，关闭其他页面，除tabBar</navigator>
<navigator url="3" open-type="reLaunch">跳转3页面，tabBar按钮，关闭所有页面</navigator>
<navigator url="4" open-type="redirect">跳转4页面</navigator>
<navigator url="5" open-type="navigate">跳转5页面</navigator>

<view>这是7页面</view>
<navigator delta="10" open-type="navigateBack">返回之前页面，最多返回10层</navigator>

• 传值

<navigator url="6?name=ouyangke" open-type="navigate">跳转6页面</navigator>

# 三、路由 api

编号|属性|说明 ---|---|---|--- 1|wx.switchTab|跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 2|wx.reLaunch|关闭所有页面，打开到应用内的某个页面 3|wx.redirectTo|关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 4|wx.navigateTo|保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面 5|wx.navigateBack|关闭当前页面，返回上一页面或多级页面

# 1、wx.switchTab

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

编号|属性|类型|必填|说明 ---|---|---|---|---|--- 1|url|string|是|需要跳转的 tabBar 页面的路径 (代码包路径)（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数。 2|success|function|否|接口调用成功的回调函数 3|fail|function|否|接口调用失败的回调函数 4|complete|function|否|接口调用结束的回调函数（调用成功、失败都会执行

<view>这是1页面</view>
<view bindtap="switchTab">跳转2页面，tabBar按钮，关闭其他页面，除tabBar</view>

Page({
  switchTab(){
    wx.switchTab({
      url: '2',
      success(){
        console.log('跳转成功');
      },
      fail(){
        console.log('跳转失败');
      },
      complete(){
        console.log('跳转成功和成功');
      }
    })
  },
})

# 2、wx.reLaunch

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

编号|属性|类型|必填|说明 ---|---|---|---|---|--- 1|url|string|是|需要跳转的应用内页面路径 (代码包路径)，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2' 2|success|function|否|接口调用成功的回调函数 3|fail|function|否|接口调用失败的回调函数 4|complete|function|否|接口调用结束的回调函数（调用成功、失败都会执行

<view>这是1页面</view>
<view bindtap="reLaunch">跳转3页面，tabBar按钮，关闭所有页面</view>

Page({
  reLaunch(){
    wx.reLaunch({
      url: '3',
      success(){
        console.log('跳转成功');
      },
      fail(){
        console.log('跳转失败');
      },
      complete(){
        console.log('跳转成功和成功');
      }
    })
  },
})

# 3、wx.redirectTo

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

编号|属性|类型|必填|说明 ---|---|---|---|---|--- 1|url|string|是|需要跳转的应用内页面路径 (代码包路径)，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2' 2|success|function|否|接口调用成功的回调函数 3|fail|function|否|接口调用失败的回调函数 4|complete|function|否|接口调用结束的回调函数（调用成功、失败都会执行

<view>这是1页面</view>
<view bindtap="redirectTo">跳转4页面</view>

Page({
  redirectTo(){
    wx.redirectTo({
      url: '4',
      success(){
        console.log('跳转成功');
      },
      fail(){
        console.log('跳转失败');
      },
      complete(){
        console.log('跳转成功和成功');
      }
    })
  },
})

# 4、wx.navigateTo

• 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面

编号|属性|类型|必填|说明 ---|---|---|---|---|--- 1|url|string|是|需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2' 2|events|Object|否|页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。 3|success|function|否|接口调用成功的回调函数 4|fail|function|否|接口调用失败的回调函数 5|complete|function|否|接口调用结束的回调函数（调用成功、失败都会执行

<view>这是1页面</view>
<view bindtap="navigateTo">跳转5页面</view>
<view bindtap="navigateToTwo" data-name="ouyangke">跳转6页面</view>

Page({
  navigateTo(){
    wx.navigateTo({
      url: '5',
      success(){
        console.log('跳转成功');
      },
      fail(){
        console.log('跳转失败');
      },
      complete(){
        console.log('跳转成功和成功');
      }
    })
  },
  navigateToTwo(e){
    console.log(e);
    wx.navigateTo({
      url: '6?name='+e.target.dataset.name,
      success(){
        console.log('跳转成功');
      },
      fail(){
        console.log('跳转失败');
      },
      complete(){
        console.log('跳转成功和成功');
      }
    })
  },
})