update docs (11477)

Signed-off-by: Nesterzhou <ester.zhou@huawei.com>

en/application-dev/ui/js-framework-resource-restriction.md

@@ -45,10 +45,10 @@ You can use the $r syntax in the application development files .hml and .js to f
 
 Example of res-defaults.json:<br/>
 
-```
+```json
 {
-    strings: {        
-        hello: 'hello world'    
+    "strings": {        
+        "hello": "hello world" 
     }
 }
 ```
@@ -57,7 +57,7 @@ Example of res-defaults.json:<br/>
 
 resources/res-dark.json:
 
-```
+```json
 {
     "image": {
         "clockFace": "common/dark_face.png"
@@ -70,7 +70,7 @@ resources/res-dark.json:
 
 resources/res-defaults.json:
 
-```
+```json
 {
     "image": {
         "clockFace": "common/face.png"
@@ -81,7 +81,7 @@ resources/res-defaults.json:
 }
 ```
 
-```
+```html
 <!-- xxx.hml -->
 <div style="background-color: {{ $r('colors.background') }}">
     <image src="{{ $r('image.clockFace') }}"></image>

en/application-dev/ui/js-framework-syntax-js.md

@@ -13,7 +13,7 @@ The ES6 syntax is supported.
   Import functionality modules.
 
   ```js
-  import router from '@system.router';
+  import router from '@ohos.router';
   ```
 
 - Code reference

en/application-dev/ui/ui-js-animate-svg.md

@@ -62,7 +62,7 @@ In the [animateMotion](../reference/arkui-js/js-components-svg-animatemotion.md)
 
 ## animateTransform Animation
 
-In the [animateMotion](../reference/arkui-js/js-components-svg-animatetransform.md) child component of the **\<svg>** component, set attributeName to bind the corresponding attribute to the **transform** attribute, and set **type** to the animation type, **from** to the start value, and **to** to the end value.
+In the [animateTransform](../reference/arkui-js/js-components-svg-animatetransform.md) child component of the **\<svg>** component, set attributeName to bind the corresponding attribute to the **transform** attribute, and set **type** to the animation type, **from** to the start value, and **to** to the end value.
 
 
 ```html

en/application-dev/ui/ui-js-component-tabs.md

@@ -16,7 +16,7 @@ Create a **<tabs>** component in the .hml file under **pages/index**.
             <text>item1</text>
             <text>item2</text>
         </tab-bar>
-        <tab-content>
+        <tab-content class="tabContent">
             <div class="text">
                 <text>content1</text>
             </div>
@@ -36,6 +36,10 @@ Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**.
   align-items: center;
   background-color: #F1F3F5;
 }
+.tabContent{
+  width: 100%;
+  height: 100%;
+}
 .text{
   width: 100%;
   height: 100%;
@@ -179,10 +183,10 @@ Add the **change** event for the **&lt;tabs&gt;** component to display the index
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   tabChange(e){
-    prompt.showToast({
+    promptAction.showToast({
       message: "Tab index: " + e.index
     })
   }
@@ -269,7 +273,7 @@ background-color:#F1F3F5;
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   data() {
     return {

en/application-dev/ui/ui-js-components-button.md

@@ -121,7 +121,7 @@ Add the **progress** method to the **\<button>** component to display the downlo
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   data: {
     percent: 0,
@@ -135,7 +135,7 @@ export default {
         this.percent += 1;
         this.downloadText = this.percent+ "%";
        } else{
-         prompt.showToast({
+         promptAction.showToast({
             message: "Download succeeded."
          })
          this.paused()
@@ -151,13 +151,13 @@ export default {
   },
  setProgress(e) {
     if(this.isPaused){
-      prompt.showToast({
+      promptAction.showToast({
         message: "Started Downloading"
       })
       this.start();
       this.isPaused = false;
     }else{
-      prompt.showToast({
+      promptAction.showToast({
         message: "Paused."
       })
       this.paused();

en/application-dev/ui/ui-js-components-canvas.md

@@ -20,6 +20,8 @@ Create a **<canvas>** component in the .hml file under **pages/index**.
 ```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;

en/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md

@@ -27,6 +27,8 @@ Use **moveTo** and **lineTo** to draw a line segment. Use the **closePath** meth
 ```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -49,7 +51,6 @@ select{
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
 export default {
   data:{
     el: null,
@@ -324,6 +325,8 @@ Add the **createLinearGradient** and **createRadialGradient** attributes to crea
 ```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -346,7 +349,6 @@ select{
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
 export default {
   data:{
     el: null,
@@ -448,6 +450,8 @@ Create a text and use the **fillText** method to write the text on the canvas. U
 ```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -470,7 +474,6 @@ select{
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
 export default {
   data:{
     el: null,
@@ -592,6 +595,8 @@ After creating an image object, use the **drawImage** attribute to draw the imag
 ```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   background-color: #F1F3F5;
   align-items: center;
@@ -626,7 +631,7 @@ text{
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   data:{
     compositeOperation: 'source-over'
@@ -669,7 +674,7 @@ export default {
     };
     // A method is triggered when the image fails to be obtained.
     img1.onerror = function() {
-      prompt.showToast({message:"error",duration:2000})
+      promptAction.showToast({message:"error",duration:2000})
     };
   },
   rotate(){
@@ -761,6 +766,8 @@ Use the **save** method to save the brush style, and use the **restore** method
 ```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   background-color: #F1F3F5;
   align-items: center;
@@ -794,7 +801,7 @@ text{
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   data:{
     ctx: '',
@@ -807,7 +814,7 @@ export default {
   save(){
     // Save the brush setting.
     this.ctx.save();
-    prompt.showToast({message:"save succeed"});
+    promptAction.showToast({message:"save succeed"});
   },
   clear(){ 
     this.ctx.clearRect(0,0,600,500);

en/application-dev/ui/ui-js-components-dialog.md

@@ -121,22 +121,22 @@ button{
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   canceldialog(e){
-    prompt.showToast({
+    promptAction.showToast({
       message: 'dialogCancel'
     })
   },
   opendialog(){
     this.$element('dialogId').show()
-     prompt.showToast({
+     promptAction.showToast({
       message: 'dialogShow'
     })
   },
   confirmClick(e) {
     this.$element('dialogId').close()
-    prompt.showToast({
+    promptAction.showToast({
       message: 'dialogClose'
     })
   },

en/application-dev/ui/ui-js-components-form.md

@@ -121,15 +121,15 @@ To submit or reset a form, add the **submit** and **reset** events.
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default{
   onSubmit(result) {
-    prompt.showToast({
+    promptAction.showToast({
       message: result.value.radioGroup
     })
   },
   onReset() {
-    prompt.showToast({
+    promptAction.showToast({
       message: 'Reset All'
     })
   }
@@ -184,6 +184,8 @@ Create two [\<Input>](../reference/arkui-js/js-components-basic-input.md) compon
 ```css
 /* index.css */
 .container {
+  width: 100%;
+  height: 100%;
   flex-direction:column;
   align-items:center;
   background-color:#F1F3F5;
@@ -200,15 +202,15 @@ label{
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   formSubmit() {
-    prompt.showToast({
+    promptAction.showToast({
       message: 'Submitted.'
     })
   },
   formReset() {
-    prompt.showToast({
+    promptAction.showToast({
       message: 'Reset.'
     })
   }

en/application-dev/ui/ui-js-components-grid.md

@@ -28,6 +28,7 @@ Create a **\<grid-container>** component in the .hml file under **pages/index**
   flex-direction: column;
   background-color: #F1F3F5;
   width: 100%;
+  height: 100%;
   justify-content: center;
   align-items: center;
 }
@@ -68,6 +69,7 @@ Touch the **\<grid-container>** component to call the **getColumns**, **getColum
   flex-direction: column;
   background-color: #F1F3F5;
   width: 100%;
+  height: 100%;
   justify-content: center;
   align-items: center;
 }
@@ -76,7 +78,7 @@ Touch the **\<grid-container>** component to call the **getColumns**, **getColum
 
 ```js
 // index.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   data:{
     gutterWidth:'',
@@ -94,13 +96,13 @@ export default {
       this.columns= result;
     }) 
     setTimeout(()=>{              
-      prompt.showToast({duration:5000,message:'columnWidth:'+this.columnWidth+',gutterWidth:'+
+      promptAction.showToast({duration:5000,message:'columnWidth:'+this.columnWidth+',gutterWidth:'+
       this.gutterWidth+',getColumns:'+this.columns})
     })
   },
   getSizeType(){
       this.$element('mygrid').getSizeType((result)=>{
-      prompt.showToast({duration:2000,message:'get size type:'+result})
+      promptAction.showToast({duration:2000,message:'get size type:'+result})
     })
   },
 }
@@ -155,6 +157,7 @@ After adding a **\<grid-row>** child component to **\<grid-container>**, add a *
   flex-direction: column;
   background-color: #F1F3F5;
   width: 100%;
+  height: 100%;
   justify-content: center;
   align-items: center;
 }
@@ -205,6 +208,7 @@ In this example, the content in the list is output cyclically to create a grid l
   flex-direction: column;
   background-color: #F1F3F5;
   width: 100%;
+  height: 100%;
 }
 text{
   color: #0a0aef;

en/application-dev/ui/ui-js-components-image-animator.md

@@ -177,7 +177,7 @@ Add the start, pause, stop, and resume events to the **<image-animator>**
 
 ```js
 // index.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   data: {
     imginfo: [
@@ -201,22 +201,22 @@ export default {
     this.$element('img').resume()
   },
   popstart(e) {
-    prompt.showToast({
+    promptAction.showToast({
       message: 'Started.'
     })
   },
   poppause(e) {
-    prompt.showToast({
+    promptAction.showToast({
       message: 'Paused.'
     })
   },
   popstop(e) {
-    prompt.showToast({
+    promptAction.showToast({
       message: 'Stopped.'
     })
   },
   popresume(e) {
-    prompt.showToast({
+    promptAction.showToast({
       message: 'Resumed.'
     })
   }

en/application-dev/ui/ui-js-components-images.md

@@ -101,17 +101,17 @@ When the image is successfully loaded, the **complete** event is triggered, and
 
 ```js
 // index.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   imageComplete(i,e){
-    prompt.showToast({
+    promptAction.showToast({
       message: "image "+i+"'s width"+ e.width+"----image "+i+"'s height"+e.height,
       duration: 3000,
     })
   },
   imageError(i,e){
     setTimeout(()=>{
-      prompt.showToast({
+      promptAction.showToast({
         message: "Failed to load image "+i+".",
         duration: 3000,
       })
@@ -177,7 +177,7 @@ In this example you touch and hold an image to gradually hide it. After the imag
 
 ```js
 // index.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   data: {
     testuri: 'common/images/bg-tv.jpg',
@@ -185,7 +185,7 @@ export default {
     timer: null
   },
   changeopacity: function () {
-    prompt.showToast({
+    promptAction.showToast({
       message: 'Touch and hold the image.'
     })
     var opval = this.imageopacity * 20

en/application-dev/ui/ui-js-components-input.md

@@ -148,16 +148,16 @@ text{
 
 ```js
 // xxx.js
-import prompt from '@system.prompt'
+import promptAction from '@ohos.promptAction'
 export default {
   search(e){
-    prompt.showToast({
+    promptAction.showToast({
       message:  e.value,
       duration: 3000,
     });
   },
   translate(e){
-    prompt.showToast({
+    promptAction.showToast({
       message:  e.value,
       duration: 3000,
     });
@@ -203,14 +203,14 @@ Add the **showError** method to the **<input>** component to display an er
 
 ```js
 // xxx.js
-import prompt from '@system.prompt' 
+import promptAction from '@ohos.promptAction' 
  export default { 
    data:{ 
      value:'', 
    }, 
    change(e){ 
      this.value = e.value; 
-     prompt.showToast({ 
+     promptAction.showToast({ 
      message: "value: " + this.value, 
        duration: 3000, 
       }); 
@@ -225,7 +225,7 @@ import prompt from '@system.prompt'
           error:this.value + 'This field cannot be left empty.'       
         }); 
       }else{ 
-        prompt.showToast({ 
+        promptAction.showToast({ 
           message: "success " 
         }); 
       } 
@@ -306,14 +306,14 @@ label {
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {    
   data: {    
   },    
   onInit() { 
   },   
   btnclick(e) {        
-    prompt.showToast({            
+    promptAction.showToast({            
       message:'Saved successfully!'        
     })    
   }

en/application-dev/ui/ui-js-components-list.md

@@ -163,7 +163,7 @@ margin-top:30px;
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   data: {
     direction: 'column',
@@ -180,12 +180,12 @@ export default {
     }
   },
   collapse(e) {
-    prompt.showToast({
+    promptAction.showToast({
       message: 'Close ' + e.groupid
     })
   },
   expand(e) {
-    prompt.showToast({
+    promptAction.showToast({
     message: 'Open ' + e.groupid
     })
   }

en/application-dev/ui/ui-js-components-menu.md

@@ -150,15 +150,15 @@ option{
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   select(e) {
-    prompt.showToast({
+    promptAction.showToast({
       message: e.value
     })
   },
   cancel(){
-    prompt.showToast({
+    promptAction.showToast({
       message: "cancel"
     })
   },
@@ -242,7 +242,7 @@ option{
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   data:{
     fresh: false,

en/application-dev/ui/ui-js-components-offscreencanvas.md

@@ -26,6 +26,8 @@ In the following example, you first create an offscreen canvas, and then create
 ```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -47,7 +49,7 @@ select{
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   data:{
     el: null,
@@ -68,7 +70,7 @@ export default {
       _this.offCanvas.drawImage(_this.img, 100, 100, 400, 300);
     };
     this.img.onerror = function() {
-      prompt.showToast({message:"error",duration:2000})
+      promptAction.showToast({message:"error",duration:2000})
     };
     var bitmap = this.offscreen.transferToImageBitmap();    this.ctx.transferFromImageBitmap(bitmap);
   },
@@ -106,6 +108,8 @@ Use **isPointInPath** to determine whether a coordinate is within the path area
 ```css
 /* xxx.css */
 .container{
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;

en/application-dev/ui/ui-js-components-path2d.md

@@ -36,7 +36,7 @@ canvas {
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 
 export default {
     onShow() {
@@ -139,7 +139,7 @@ text {
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 
 export default {
     data: {

en/application-dev/ui/ui-js-components-picker.md

@@ -144,7 +144,7 @@ Add the **change** event to confirm selection and the **cancel** event to cancel
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   data: {
     multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"]],
@@ -153,10 +153,10 @@ export default {
   },
   multitextonchange(e) {
     this.multitextvalue=e.newValue;
-    prompt.showToast({ message:"Multi-column text changed to:" + e.newValue })
+    promptAction.showToast({ message:"Multi-column text changed to:" + e.newValue })
   },
   multitextoncancel() {
-    prompt.showToast({ message:"multitextoncancel" })
+    promptAction.showToast({ message:"multitextoncancel" })
   },
 }
 ```
@@ -246,7 +246,7 @@ Implement a health check-in application by using the **\<picker>** component.
 
 ```js
 // xxx.js
-import pmt from '@system.prompt'
+import promptAction from '@ohos.promptAction'
 export default {
   data: {
     yorn1:'No',
@@ -281,10 +281,10 @@ export default {
   dateonchange(e) {
     e.month=e.month+1;
     this.datevalue = e.year + "-" + e.month + "-" + e.day;
-    pmt.showToast({ message:"date:"+e.year+"-"+e.month+"-"+e.day }) 
+    promptAction.showToast({ message:"date:"+e.year+"-"+e.month+"-"+e.day }) 
   },
   showtoast() {
-    pmt.showToast({
+    promptAction.showToast({
       message: 'Submitted.',
       duration: 2000,
       gravity: 'center'

en/application-dev/ui/ui-js-components-rating.md

@@ -213,7 +213,7 @@ switch{
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   data: {
     backstar: '',
@@ -249,7 +249,7 @@ export default {
     this.rate = e.progress
   },
   showrating(e) {
-    prompt.showToast({
+    promptAction.showToast({
       message:'Current Rating' + e.rating
     })
   }

en/application-dev/ui/ui-js-components-stepper.md

@@ -249,7 +249,7 @@ button{
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   data: {
     index:0,
@@ -262,20 +262,20 @@ export default {
     this.$element('stepperId').setNextButtonStatus({status: 'skip', label: 'SKIP'});
   },
   stepperFinish(){
-    prompt.showToast({
+    promptAction.showToast({
       message: 'All Finished'
     })
   },
   stepperChange(e){
     console.log("stepperChange"+e.index)
-    prompt.showToast({
+    promptAction.showToast({
       // index indicates the sequence number of the current step.
       message: 'Previous step: '+e.prevIndex+"-------Current step:"+e.index
     })
   },
   stepperNext(e){
     console.log("stepperNext"+e.index)
-    prompt.showToast({
+    promptAction.showToast({
       // pendingIndex indicates the sequence number of the step to be redirected to.
       message: 'Current step:'+e.index+"-------Next step:"+e.pendingIndex
     })
@@ -364,8 +364,8 @@ Use a **\<stepper>** component to navigate through the steps. Create a **\<Toggl
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
-import router from '@system.router';
+import promptAction from '@ohos.promptAction';
+import router from '@ohos.router';
 let myset = new Set();
 export default {
   data: {

en/application-dev/ui/ui-js-components-swiper.md

@@ -262,13 +262,13 @@ select{
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default{
   change(e){
-    prompt.showToast({duration:2000,message:"current index:"+e.index});
+    promptAction.showToast({duration:2000,message:"current index:"+e.index});
   },
   finish(){
-    prompt.showToast({duration:2000,message:"The switchover ends"});
+    promptAction.showToast({duration:2000,message:"The switchover ends"});
   },
   selectChange(e){
     this.$element('swiper').swipeTo({index: Number(e.newValue)});
@@ -344,7 +344,7 @@ swiper{
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   data:{
     index: 0,

en/application-dev/ui/ui-js-components-toolbar.md

@@ -153,17 +153,17 @@ toolbar-item{
 
 ```js
 // xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
 export default {
   data:{
     itemColor:'black'
   },
   itemClick(){
     this.itemColor= "red";
-    prompt.showToast({duration:2000,message:'item click'});
+    promptAction.showToast({duration:2000,message:'item click'});
   },
   itemLongPress(){
-    prompt.showToast({duration:2000,message:'item long press'});
+    promptAction.showToast({duration:2000,message:'item long press'});
     this.itemColor= "blue";
   },
 }

en/application-dev/ui/ui-ts-animation-feature.md

@@ -111,7 +111,7 @@ The splash screen animation refers to the fade-in and fade-out of the logo. Afte
    }
    ```
 
-5. After the splash screen animation plays for 1 second, the **FoodCategoryList** page is displayed. Set the **onFinish** callback of **animateTo**. Invoke the **setTimeout** API of the timer. After a delay of 1s, call **router.replace** to display the **FoodCategoryList** page.
+5. After the splash screen animation plays for 1 second, the **FoodCategoryList** page is displayed. Set the **onFinish** callback of **animateTo**. Invoke the **setTimeout** API of the timer. After a delay of 1s, call **router.replaceUrl** to display the **FoodCategoryList** page.
 
    ```ts
    import router from '@ohos.router'
@@ -137,7 +137,7 @@ The splash screen animation refers to the fade-in and fade-out of the logo. Afte
           delay: 100, 
           onFinish: () => {
             setTimeout(() => {
-              router.replace({ url: "pages/FoodCategoryList" })
+              router.replaceUrl({ url: "pages/FoodCategoryList" })
             }, 1000);
           }
         }, () => {
@@ -201,7 +201,7 @@ The splash screen animation refers to the fade-in and fade-out of the logo. Afte
              delay: 100,
              onFinish: () => {
                setTimeout(() => {
-                 router.replace({ url: "pages/FoodCategoryList" })
+                 router.replaceUrl({ url: "pages/FoodCategoryList" })
                }, 1000);
              }
            }, () => {
@@ -305,7 +305,7 @@ Implement the shared element transition between the food list page and the food
        .height(184)
        .width('100%')
        .onClick(() => {
-         router.push({ url: 'pages/FoodDetail', params: { foodId: this.foodItem } })
+         router.pushUrl({ url: 'pages/FoodDetail', params: { foodData: this.foodItem } })
        })
      }
    }

en/application-dev/ui/ui-ts-page-redirection-data-transmission.md

@@ -61,7 +61,7 @@ The procedure below uses these two mechanisms for redirection between the page l
        .height(184)
        .width('100%')
        .onClick(() => {
-         router.push({ url: 'pages/FoodDetail' })
+         router.pushUrl({ url: 'pages/FoodDetail' })
        })
      }
    }
@@ -138,7 +138,7 @@ We have implemented the redirection and going back of the **FoodCategoryList** a
    The router API called by **FoodGridItem** also has supports redirection with parameters. The method of using the router API is similar to that of using the **Navigator**.
 
    ```ts
-   router.push({
+   router.pushUrl({
      url: 'pages/FoodDetail',
      params: { foodData: this.foodItem }
    })