Create a new page in HBuilderX. The steps to create a new page are as follows:
- You can right-click a project or a folder and select new page
- Enter the project name and the template used by the project
- Select whether to register in pages.json. Note: all pages that need to be displayed separately must be registered here, otherwise they cannot be displayed.
All used pages need to be registered in pages.json
In the program, if multiple pages need to jump to each other, you can use the following commands:
uni.navigateTo
Keep the current page, jump to a page in the application, and use uni.navigateBack to return to the original page.
object parameter description:
parameter | type | Required | Default value | explain | platform |
---|
Example: there are two ways to jump to a new page and pass parameters:
1. Use the url method for delivery. Note: the url has a length limit. If the string is too long, it will fail to pass. In addition, when special characters such as spaces appear in the parameters, the parameters need to be encoded (please refer to the description in the web page here)
//Jump to the newpage.vue page at the start page and pass the parameters uni.navigateTo({ url: "../index2/index2?id=1&name=Zhang San" }); <template> <view> I am a new page index2,Parameters I received: <view>id:{{id}}</view> <view>name:{{name}}</view> </view> </template> <script> export default { onLoad( option ) { this.id = option.id; this.name = option.name; }, data() { return { id: 0, name: '' } }, } </script>
2. Pass using event events
<!-- index.vue --> <script> uni.navigateTo( { url: "../index3/index3", events: { page_index_receive( data ) { console.log( "index.vue Received data(from index3.vue Sent it): ", data ); } }, success( res ) { res.eventChannel.emit( 'page_index3_receive', { id: 2, name: "Li Si" } ); } }) </script> <!-- index3.vue --> <template> <view> I am a new page index3,Parameters I received: <view>id:{{id}}</view> <view>name:{{name}}</view> </view> </template> <script> export default { onLoad( option ) { const enventchannel = this.getOpenerEventChannel(); enventchannel.emit( 'page_index_receive', { id: 1, name: 'Zhang San' } ); enventchannel.on( 'page_index3_receive', ( data ) => { this.id = data.id; this.name = data.name; } ) }, data() { return { id: 0, name: '' } }, } </script>
be careful:
- The page Jump path has hierarchical restrictions. You cannot jump to a new page without restrictions
- Jump to tabBar page can only be used switchTab Jump
- The target page of the routing API must be a vue page registered in pages.json. If you want to open the web url, you can use it on the App platform plus.runtime.openURL Or web view component; H5 platform uses window.open; The applet platform uses the web view component (the url needs to be in the applet's online white list). In the Hello uni app, a component ulink.vue has encapsulated multiple terminals, which can be used for reference.
- APP-NVUE platform does not support obtaining eventChannel by this. Getopenerteventchannel(). Please use this.$scope.eventChannel instead. Please refer to the above example for specific methods.
uni.navigateBack
Close the current page and return to the previous page or multi-level page. Can pass getCurrentPages() Get the current page stack and decide how many layers to return.
OBJECT parameter description
parameter | type | Required | Default value | explain | Platform difference description |
---|
// Note: when calling navigateTo jump, the page calling this method will be added to the stack, while the redirectTo method will not. See the example code below // This is page A uni.navigateTo({ url: 'B?id=1' }); // This is page B uni.navigateTo({ url: 'C?id=1' }); // navigateBack in page C will return to page A uni.navigateBack({ delta: 2 });
uni.redirectTo
Close the current page and jump to a page in the application.
Parameters can only be used: url,success,fail,complete
uni.reLaunch
Close all pages and open to a page in the application.
be careful: If called uni.preloadPage(OBJECT) Does not close, only triggers the lifecycle onHide
- After calling uni.reLaunch on the H5 side, the previous page stack will be destroyed, but the history before the browser cannot be cleared. At this time, the navigateBack cannot return. If there is a history, click the return button of the browser or call history.back() to navigate to other history records of the browser.
uni.preloadPage
Only app nvue and H5 are supported
Course video tutorial:
Uniapp Q & a mutual learning exchange group:
Uniapp Q & a mutual learning exchange group: 326576256
It aims to learn from each other, help each other and solve problems encountered when using Uniapp