Advanced uni-app routing—the use of different routing jump configurations

Advanced uni-app routing—the use of different routing jump configurations

Advanced uni-app routing—the use of different routing jump configurations

---

---

foreword

Advanced uni-app routing of UNI-APP learning series - the use of different routing jump configurations

---

1. Configure two first-level navigation pages (tabBar)

• Configure 2 first-level navigation pages (tabBar)

  • Create a new vue file in the pages directory

  • pages.json configure tabBar

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

    Results as shown below
    

2. Routing configuration classification

jump method	illustrate
uni.navigateTo()	Keep the current page, jump to a page in the application, and use it uni.navigateBackto return to the original page
uni.redirectTo()	Close the current page and jump to a page in the app
uni.reLaunch()	Close all pages, open to a page in the app
uni.switchTab()	Jump to the tabBar page and close all other non-tabBar pages
uni.navigateBack()	Close the current page and return to the previous page or multi-level pages. getCurrentPages()You can get the current page stack by and decide how many layers you need to return

• Notice

  • Implement parameter passing

    • uniapp global custom events: https://uniapp.dcloud.net.cn/tutorial/page.html#emit
    • Global state management library: pinia, vuex

  • navigateTo, redirectToonly non-tabBar pages can be opened.

  • switchTabOnly tabBarpages can be opened.

  • reLaunchCan open any page

    • The ByteDance applet and Feishu applet do not support

• Summarize

  • Generally, use uni.navigateTo to jump to the page
  • The tabbar page jump uses uni.switchTab or uni.reLaunch

---

Summarize

The above is what I want to talk about today. This article introduces the uni-app routing advanced of the UNI-APP learning series - the use of different routing jump configurations. I will continue to develop and explain the UNI-APP framework based on VSCode. I like it Please click to follow, the tutorial on using the UNI-APP framework will continue to be updated.