1# Defining Page Routes 2 3An application generally consists of more than one page. For example, a music application may come with a music list page and a playback page. You need to link these pages through the page router to implement redirection as required. For example, in a music application, a user taps a song on a music list page to jump to the playback page of the song. 4 5 6The page router finds the target page based on the page URI. The following describes how to implement redirection between two pages: 7 8 91. In the **Project** window of DevEco Studio, choose **src** > **main** > **js** > **MainAbility**. Right-click the **pages** folder and choose **NewJS Page** from the shortcut menu to create the **detail** page. 10 112. Call **router.push()** to navigate users to the **detail** page. 12 133. Call **router.back()** to navigate users to the **index** page. 14 15 16## Building the Page Layout 17 18The **index** and **detail** pages each contains a **\<text>** component that specifies the current page, and a **\<button>** component that implements the switching between two pages. Example code in **.hml** files is as follows: 19 20```html 21<!-- index.hml --> 22<div class="container"> 23 <text class="title">This is the index page.</text> 24 <button type="capsule" value="Go to the second page" class="button" onclick="launch"></button> 25</div> 26``` 27 28```html 29<!-- detail.hml --> 30<div class="container"> 31 <text class="title">This is the detail page.</text> 32 <button type="capsule" value="Go back" class="button" onclick="launch"></button> 33</div> 34``` 35 36 37## Setting Page Styles 38 39Set styles for the **index** and **detail** pages. Center the **\<text>** and **\<button>** components and space the two components with 50 pixels. The CSS code for the two pages is as follows: 40 41```css 42/* index.css */ 43/* detail.css */ 44.container { 45 width: 100%; 46 height: 100%; 47 flex-direction: column; 48 justify-content: center; 49 align-items: center; 50} 51 52.title { 53 font-size: 50px; 54 margin-bottom: 50px; 55} 56``` 57 58 59## Implementing Redirection 60 61To make the **launch** method of the **\<button>** component take effect, the redirection logic needs to be implemented in the **.js** file of the page. Call **router.push()** to add the page URI to the route stack, that is, to jump to the page specified by the URI. You need to import the **router** module before calling the **router** method. The sample code is as follows: 62 63```js 64// index.js 65import router from '@ohos.router'; 66export default { 67 launch() { 68 router.push ({ 69 url: 'pages/detail/detail', 70 }); 71 }, 72} 73``` 74 75```js 76// detail.js 77import router from '@ohos.router'; 78export default { 79 launch() { 80 router.back(); 81 }, 82} 83``` 84 85The figure below shows the effect. 86 87 88
