# Navigation组件管理两个界面都加载本地H5进行交互跳转，如何进行页面刷新

#### 问题现象

由Navigation管理的两个界面都加载本地H5，Web首页面跳转到Web第二个页面后，如何进行页面刷新？

#### 效果预览

#### 背景知识

*   onLoadIntercept：当Web组件加载url之前触发该回调，用于判断是否阻止此次访问。
*   onWillShow：当该NavDestination显示之前触发此回调。

#### 解决方案

点击Web页面的按钮跳转Navigation页面需要在Web组件的onLoadIntercept拦截页面加载，再使用Navigation提供的组件路由能力跳转页面，然后通过onWillShow方法中进行刷新，这样每一次进入或返回都可以重新刷新界面。

具体实现如下：

*   主界面，用于创建Navigation。
    
    ```
    import { WebOnePage } from './WebOnePage';
    import { WebTwoPage } from './WebTwoPage';
    
    @Entry
    @Component
    struct Index {
      @Provide navPathStack: NavPathStack = new NavPathStack();
    
      @Builder
      PageMap(name: string) {
        if (name === 'WebOnePage') {
          WebOnePage();
        } else if (name === 'WebTwoPage') {
          WebTwoPage();
        }
      }
    
      build() {
        Navigation(this.navPathStack) {
          Column() {
            Text('跳转')
              .fontSize(50)
              .fontWeight(FontWeight.Bold)
              .padding({ top: 200 })
              .onClick(() => {
                this.navPathStack.pushPath({ name: 'WebOnePage' });
              });
          }
          .height('100%')
          .width('100%');
        }
        .hideTitleBar(true)
        .navDestination(this.PageMap);
      }
    }
    ```
    
*   第二个界面，创建Web组件，并加载本地index.html，通过Web组件中的onLoadIntercept方法拦截后调用Navigation组件的push方法跳转到下一个页面，并在该界面中的onWillShow方法内进行监听，每次触发该方法调用下拉刷新逻辑。
    
    ```
    import { webview } from '@kit.ArkWeb';
    
    @Component
    export struct WebOnePage {
      private controller: WebviewController = new webview.WebviewController();
      @Consume('navPathStack') navPathStack: NavPathStack;
    
      build() {
        NavDestination() {
          Column() {
            Web({
              src: $rawfile('index.html'),
              controller: this.controller
            })
              .zoomAccess(false)
              .onLoadIntercept((event) => {
                if (event.data.getRequestUrl() === 'arkts:/pages/toWebTwoPage') {
                  this.navPathStack.pushPath({ name: 'WebTwoPage' });
                  return true;
                }
                return false;
    
              });
          };
        }
        .title('返回上一界面')
        .onWillShow(() => {
          this.getUIContext().getPromptAction().showToast({
            message: '下拉刷新'
          });
        });
      }
    }
    ```
    
    index.html：
    
    ```
    <!DOCTYPE html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Document</title>
        <link rel="stylesheet" href="./css/styles.css">
    </head>
    
    <body>
    <div class="web_page_demo">
        <div class="title">Web首界面</div>
        <ul>
            <li>
                跳转到第二个页面
            </li>
        </ul>
    </div>
    </body>
    <script></script>
    ```
    
*   第三个界面，创建Web组件，并加载本地index1.html，通过Web组件中的onLoadIntercept回调拦截后调用Navigation组件的pop方法返回上一个界面。
    
    ```
    import { webview } from '@kit.ArkWeb';
    
    @Component
    export struct WebTwoPage {
      private controller: WebviewController = new webview.WebviewController();
      @Consume('navPathStack') navPathStack: NavPathStack;
    
      build() {
        NavDestination() {
          Column() {
            Web({
              src: $rawfile('index1.html'),
              controller: this.controller
            })
              .zoomAccess(false)
              .onLoadIntercept((event) => {
                if (event.data.getRequestUrl() === 'arkts:/pages/toBackWebOnePage') {
                  this.navPathStack.pop();
                  return true;
                }
                return false;
              });
          };
        }
        .title('返回上一界面');
      }
    }
    ```
    
    index1.html：
    
    ```
    <!DOCTYPE html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>Document</title>
        <link rel="stylesheet" href="./css/styles.css">
    </head>
    
    <body>
    <div class="web_page_demo">
        <div class="title">第二个Web界面</div>
        <ul>
            <li>
                返回上一个Web界面
            </li>
        </ul>
    </div>
    </body>
    <script></script>
    ```