Several common ways of routing jumping for uniapps (navigateTo, redirectTo...)

1. Keep the current page, jump to a page in the application, and useYou can return to the original page.

The sample code is as follows:

({
	url:'./home/index'
});

Notice:
There are hierarchical restrictions on the page jump path, and you cannot jump unlimitedly to a new page and jump to a tabBar page. You can only use it.switchTabJump the target page of the routing APImustIt is the vue page registered in it. If you want to open the web url, please refer to [uniapp official - routing and page jump]

2. (Close the current page and return to the previous page or multiple pages)

The sample code is as follows:

// NavigateBack in the third level page will return to the first level page({
	delta: 2
});

Notice:

AvailablegetCurrentPages()Method Get the current page stack and decide how many layers you need to return.
Common parametersdelta, default is1, meaning: the number of pages returned. If delta is greater than the number of existing pages, it will be returned to the home page.

3. redirectTo (close the current page and jump to other pages)

The sample code is as follows:

({
	url:'./home/index'
})

Notice:

In-apps that need to be redirectedNon-tabBarThe path of the page can be followed by parameters. Use between parameters and paths?Separate, parameter key and parameter value=Connected, use different parameters&Separation; such as ‘path?key=value&key2=value2’
Go to the tabBar page and only use switchTab to jump

4. reLaunch (Close all pages and jump to other pages)

The sample code is as follows:

({
	url:'./home/index'
})

Notice:

The path to the in-app page that needs to be redirected can be followed by parameters. Use ? separation between parameters and paths, the parameter keys and parameter values are connected with =, and different parameters are separated by &; for example, ‘path?key=value&key2=value2’
Go to the tabBar page and cannot take parameters
The page stack will be destroyed before calling the H5 side, but the history before the browser cannot be cleared. At this time, navigateBack cannot return. If there is a history, click the browser's return button or call () to navigate to other history records.
If () is called, it will not close, and only the life cycle will be triggered.

5. switchTab (Applicable to jump between the bottom navigation bars, or to the bottom navigation bar (jump to the tabBar page and close all other non-tabBar pages.))

The sample code is as follows:

({
	url: './home/index'
});

Notice:

The path to the tabBar page that needs to be redirected (the page defined in the tabBar field) cannot be followed by parameters.

For more details, please refer to:【uniapp official-routing and page jump】

Supplement: Some differences in route jumps in uni-app

Let's summarize

navigateTo, redirectTo can only open non-tabBar pages (for example, list to details)

switchTab can only open tabBar page (transmission parameters between tabBars, etc.)

reLaunch can open any page

The tabBar at the bottom of the page is determined by the page, that is, as long as the page defined as the tabBar, there is a tabBar at the bottom, and the page cannot be redirected inside.

({
url:'Jump path?id=xxx&amp;alue=xxx',
})
The passed parameters on the page you jump to can beonLoad:function(option){
optionIt is the passed parameters
}

Non-tabBar pages in the application that need to be redirected, in fact, even the pages configured in it cannot be redirected for details, please refer to the official website uni-app routing jump

Notice:

1: There are hierarchical restrictions on the page jump path, and new pages cannot be redirected without restrictions.

2: Skip to tabBar page and only use switchTab to jump

({
url:'Jumped path'
The path to non-tabBar pages in the application that need to be redirected,
})

Note that you close the current page, jump to a page in the application, jump to the tabBar page, only switchTab can be used to jump to

({
    url: 'test?id=1'
});

Close all pages and open to a page within the app. If the page path to jump is a tabBar page, it cannot be taken with parameters.

({
    url: '/pages/index/index'
    Need to jump tabBar Page path（Need to be  of tabBar 字段定义of页面），No parameters can be included after the path
});

Jump to the tabBar page and close all other non-tabBar pages.

// This is page A({
    url: 'B?id=1'
});
// This is page B({
    url: 'C?id=1'
});
// NavigateBack in page C, will return to page A({
    delta: 2
});

Close the current page and return to the previous page or multiple-level pages. You can get the current page stack through getCurrentPages() and decide how many layers you need to return.

Summarize

This is the end of this article about several common route jumping for Uniapp. For more related route jumping content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!