Master Uniapp Page Navigation: 4 Common Methods for Passing Parameters and Linking Pages

Preparation: Add Two Test Pages

Create pageA (the source page) and pageB (the target page) in the pages folder using HBuilderX, then register them in pages.json with appropriate path and navigationBarTitleText entries.

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": { "navigationBarTitleText": "首页" }
    },
    {
      "path": "pages/pageA/pageA",
      "style": { "navigationBarTitleText": "页面A（跳转页）" }
    },
    {
      "path": "pages/pageB/pageB",
      "style": { "navigationBarTitleText": "页面B（目标页）" }
    }
  ]
}

Core Practice: Four Common Navigation Methods

Method 1 – Keep Current Page (uni.navigateTo)

Use when you need to return to the previous page, such as from a list to a detail view. Parameters are passed via the URL query string.

Add a button in pageA:

<template>
  <view class="container" style="display: flex; flex-direction: column; gap: 30rpx; padding: 50rpx;">
    <button @click="goToPageB" class="btn">方式1：保留页面，跳转pageB（可返回）</button>
  </view>
</template>

Define the click handler that navigates and passes id and name:

export default {
  methods: {
    goToPageB() {
      uni.navigateTo({
        url: "/pages/pageB/pageB?id=1&name=pageA",
        success: () => {
          uni.showToast({ title: "跳转成功，可返回！" });
        }
      });
    }
  }
}

In pageB, receive the parameters in onLoad:

export default {
  onLoad(options) {
    console.log("接收的参数：", options);
    const id = options.id;
    const name = options.name;
    uni.showToast({ title: `接收参数： id=${id}，name=${name}` });
  }
}

Run the app: clicking the button shows a toast with the received parameters and the navigation bar provides a back button.

Method 2 – Close Current Page (uni.redirectTo)

Use for flows where returning is not needed, such as after a successful login. Parameters are supported, but the target cannot be a tabBar page.

Add a button in pageA:

<button @click="redirectToPageB" class="btn">方式2：关闭页面，跳转pageB（不可返回）</button>

Define the handler with uni.redirectTo:

methods: {
  redirectToPageB() {
    uni.redirectTo({
      url: "/pages/pageB/pageB?id=2&name=pageA_redirect",
      success: () => {
        uni.showToast({ title: "跳转成功，不可返回！" });
      }
    });
  }
}

Test: after the click the navigation bar lacks a back button, confirming the current page was closed.

Method 3 – Close All Pages (uni.reLaunch)

Ideal for scenarios like logging out and returning to the login screen, or resetting the navigation stack.

Add a button in pageA:

<button @click="reLaunchToPageB" class="btn">方式3：关闭所有页面，跳转pageB</button>

Handler uses uni.reLaunch:

reLaunchToPageB() {
  uni.reLaunch({
    url: "/pages/pageB/pageB?id=3&name=pageA_reLaunch",
    success: () => {
      uni.showToast({ title: "关闭所有页面，跳转成功！" });
    }
  });
}

Running the test closes every page (including the home page) and leaves only pageB on the stack.

Method 4 – Switch to a TabBar Page (uni.switchTab)

Used for switching among tabBar pages such as Home, Category, or Profile. This method does not support passing parameters and will close all non‑tabBar pages.

Configure the tabBar in pages.json after the pages array:

"tabBar": {
  "list": [
    { "pagePath": "pages/index/index", "text": "首页" },
    { "pagePath": "pages/pageB/pageB", "text": "我的" }
  ]
}

Add a button in pageA:

<button @click="switchToTab" class="btn">方式4：跳转到tabBar页面（首页）</button>

Handler calls uni.switchTab:

switchToTab() {
  uni.switchTab({
    url: "/pages/index/index",
    success: () => {
      uni.showToast({ title: "跳转到tabBar首页！" });
    }
  });
}

Test: clicking the button jumps to the Home tabBar page, closes pageA, and no parameters are passed.

Key Tips for Parameter Passing

Format: Append ?key=value&key2=value2 to the URL, e.g., /pages/pageB/pageB?id=1&name=test.

Reception: Use onLoad(options) in the target page; options holds all query parameters.

Type conversion: Parameters arrive as strings; convert to numbers or booleans with Number() or JSON.parse() as needed.

Special case: uni.switchTab cannot receive query parameters; use uni.setStorageSync for temporary data sharing.

Common Pitfalls and Solutions

Page not found : Verify the target page’s route is correctly added to pages.json with exact case‑sensitive path.

Parameters not received : Ensure the URL contains ? and & separators, and read them in onLoad, not in onShow.

Attempting to pass parameters with uni.switchTab : Switch to a non‑tabBar page using uni.navigateTo or store data locally before switching.

No back button after navigation : This occurs when using uni.redirectTo or uni.reLaunch</>; use <code>uni.navigateTo when a return path is required.