How to configure uniapp routing

With the popularity and demand for mobile applications increasing, more and more developers are beginning to use cross-platform development technology to build applications. UniApp, as a cross-platform development framework, has gradually emerged under this trend and is welcomed by more and more developers. Routing is a very important component when developing applications with UniApp, which allows you to navigate between different pages.

In UniApp, routing is used to control page jumps and navigation of the application. If you are already familiar with the routing mechanism of Vue.js, you will feel very familiar when using UniApp's routing. UniApp's routing mechanism is well compatible with Vue.js routing and provides some additional functions and APIs.

For beginners, the application of UniApp routing may not be clear at first, so where should you fill in UniApp routing? In the next article, we will introduce the application of UniApp routing in detail and where to fill it out.

1. Routing configuration file

In UniApp, you can configure routing in the routing configuration file. The routing configuration file is generally located in the pages.json file in the root directory. Its function is to configure the routing mapping table of the application. In the routing configuration file, you need to specify the path of each page, the page title, the page icon and other attributes. If you need to add the page to the navigation bar, you also need to specify the tabBar attribute. The following is a simple routing configuration file example:

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#ffffff"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于我们",
        "navigationBarBackgroundColor": "#ffffff"
      },
      "tabBar": {
        "text": "关于",
        "iconPath": "../../static/images/tabbar/about.png",
        "selectedIconPath": "../../static/images/tabbar/about-active.png"
      }
    }
  ],
  "tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#35b4b4",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "../../static/images/tabbar/home.png",
        "selectedIconPath": "../../static/images/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/about/about",
        "text": "关于",
        "iconPath": "../../static/images/tabbar/about.png",
        "selectedIconPath": "../../static/images/tabbar/about-active.png"
      }
    ]
  }
}

In the above code, we define two pages: index and about, and in A tabBar attribute is added to the about page to specify the position and style of the page in the navigation bar. At the same time, we also define the navigation bar style of the application. In this example, we use the index page as the home page of the navigation bar, so set it as the default page in the tabBar attribute.

2. Use UniApp Routing API

In addition to routing configuration in the routing configuration file, UniApp also provides a complete set of routing APIs that can be flexibly used in business logic. use. These APIs include uni.navigateTo, uni.redirectTo, uni.reLaunch, uni.switchTab, and uni.navigateBackwait.

• uni.navigateTo

Jump from the current page to a page in the application. If the target page has not been opened, the API will open a new page; if the target page is already open, the API will put the target page on the top of the stack.

uni.navigateTo({
  url: '/pages/about/about'
});

• uni.redirectTo

Close the current page and jump to a certain page in the application. This API closes the current page, so there is no way to return to the current page via the back button.

uni.redirectTo({
  url: '/pages/about/about'
});

• uni.reLaunch

Close all pages and open a certain page of the application.

uni.reLaunch({
  url: '/pages/about/about'
});

• uni.switchTab

Jump to a tab page of the application. This API can only be used to jump to the application. The tab page.

uni.switchTab({
  url: '/pages/index/index'
});

• uni.navigateBack

Close the current page and return to the previous page.

uni.navigateBack({
  delta: 1  // 返回的页面数，如果为空，则返回上一个页面
});

3. Summary

In UniApp, routing is an important part of application jump and navigation. When developing applications, you can configure and use routing through routing configuration files and routing APIs. The routing configuration file can well control the position and style of the page, while the routing API provides a flexible programming method, allowing you to flexibly jump and navigate pages in business logic. Learning to use the UniApp routing mechanism can bring great convenience and efficiency to your development.

The above is the detailed content of How to configure uniapp routing. For more information, please follow other related articles on the PHP Chinese website!