uni-app routing jump

There are two ways for uni-app to perform routing jumps. The following article mainly introduces several common ways of uniapp routing jumps (navigateTo, redirectTo...).

1. uni.navigateTo retains the current page, jumps to a page in the application, and uni.navigateBackreturns to the original page by using it.

The sample code is as follows:

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

Notice:

The page jump path has hierarchical restrictions, and you cannot jump to a new page without limit to jump to the tabBar page. You can only use the  switchTab  jump routing API. The target page 必须 is the vue page registered in pages.json. If you want to open the web url, please refer to [uniapp official - routing and page jumping] for details.

2. uni.navigateBack (close the current page, return to the previous page or multi-level page)

The sample code is as follows:

// 在第3级页面内 navigateBack，将返回第一层页面
uni.navigateBack({
	delta: 2
});

Notice:

• getCurrentPages()The current page stack can be obtained through  the method to determine how many layers need to be returned.
• Commonly used parameters delta, the default is 1, the meaning is: the number of pages to return, if delta is greater than the number of existing pages, return to the home page.

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

The sample code is as follows:

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

Notice:

• The path of the page in the application that needs to be redirected 非 tabBar , and parameters can be added after the path. Use separation between parameters and paths ?, parameter keys and parameter values ​​are =connected, and different parameters are &separated; such as 'path?key=value&key2=value2'
• To go to the tabBar page can only use switchTab to jump

4. reLaunch (close all pages, jump to other pages)

The sample code is as follows:

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

Notice:

• The path of the in-app page that needs to be redirected, with parameters after the path. Parameters and paths are separated by ?, parameter keys and parameter values ​​are connected by =, and different parameters are separated by &; such as 'path?key=value&key2=value2'
• If you go to the tabBar page, you cannot take parameters
• After the H5 end calls uni.reLaunch, the previous page stack will be destroyed, but the previous history of the browser cannot be cleared. At this time, navigateBack cannot return. If there is a history, click the back button of the browser or call history.back() to still navigate to other history records of the browser.
• If uni.preloadPage() is called, it will not be closed, and only trigger the life cycle onHide

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

The sample code is as follows:

 

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

Notice:

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

For more details, please refer to: [uniapp official - routing and page jump]

Supplement: Some routing jump differences in uni-app

in conclusion

navigateTo, redirectTo can only open non-tabBar pages (such as list to details)

switchTab can only open the tabBar page (parameter transfer between tabBar, 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 is defined as a tabBar, there is a tabBar at the bottom, and you cannot jump to the page in App.vue

uni.navigateTo({
url:'跳转的路径?id=xxx&alue=xxx',
})
传递的参数在跳转到的页面可以在onLoad:function(option){
option就是传递的参数
}

 

The non-tabBar pages in the application that need to be redirected are actually pages configured in pages.json that cannot be redirected. For details, please refer to the official website uni-app route redirection

Notice:

1: There are hierarchical restrictions on the page jump path, and you cannot jump to new pages without limit

2: Jump to tabBar page can only use switchTab to jump

uni.redirectTo({ url: 'Jump path' the path of the non-tabBar page in the application that needs to be redirected, })

Note that closing the current page, jumping to a page in the application, and jumping to the tabBar page can only use switchTab to jump

 

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

Close all pages and open to a page within the app. If the redirected page path is a tabBar page, it cannot take parameters.

uni.switchTab({
    url: '/pages/index/index'
    需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数
});

 

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

// 此处是A页面
uni.navigateTo({
    url: 'B?id=1'
});
// 此处是B页面
uni.navigateTo({
    url: 'C?id=1'
});
// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
    delta: 2
});

Close the current page and return to the previous page or multi-level pages. The current page stack can be obtained through getCurrentPages() to determine how many layers need to be returned.