首页 > 网络编程 > JavaScript > javascript技巧 > 小程序路由跳转

微信小程序路由跳转功能实现

2025-06-17 09:57:32 作者：干到60岁退休的码农

本文介绍了微信小程序路由跳转方法,包括wx.switchTab实现底部导航栏和wx.navigateTo跳转非底部页面,需配置pages数组及自定义tab-bar组件,感兴趣的朋友一起看看吧

路由方式

wx.switchTab

实现底部导航栏

1.配置信息

app.json
  "tabBar": {
    "custom": true,
    "list": [{
        "pagePath": "pages/home/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/my/index",
        "text": "我的"
      }
    ]
  }

2.tabBar组件

实现一个公共组件custom-tab-bar，在代码根目录下添加入口文件：
index.js

Component({
  data: {
    value: 'home',
    list: [{
        value: 'home',
        label: '首页',
        icon: 'home'
      },
      {
        value: 'my',
        label: '我的',
        icon: 'user'
      },
    ],
  },
  lifetimes: {
    ready() {
      const pages = getCurrentPages();
      const curPage = pages[pages.length - 1];
      if (curPage) {
        const nameRe = /pages\/(\w+)\/index/.exec(curPage.route);
        if (nameRe === null) return;
        if (nameRe[1] && nameRe) {
          this.setData({
            value: nameRe[1],
          });
        }
      }
    },
  },
  methods: {
    handleChange(e) {
      wx.switchTab({
        url: `/pages/${e.detail.value}/index`
      });
    }
  }
});

index.json

{
  "component": true,
  "styleIsolation": "apply-shared",
  "usingComponents": {
    "t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
    "t-tab-bar-item": "tdesign-miniprogram/tab-bar-item/tab-bar-item"
  }
}

index.wxml

<t-tab-bar value="{{ value }}" theme="tag" split="{{ false }}" bind:change="handleChange">
  <t-tab-bar-item icon="home" value="home">首页</t-tab-bar-item>
  <t-tab-bar-item icon="user" value="my">我的</t-tab-bar-item>
</t-tab-bar>

wx.navigateTo

wx.navigateTo({
      url: '/pages/game/index?id=1',
    })

需要跳转的页面需要注册在app.json的pages数组里：

  "pages": [
    "pages/home/index",
    "pages/my/index",
    "pages/game/index"
  ],

到此这篇关于微信小程序路由跳转功能实现的文章就介绍到这了,更多相关小程序路由跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！