页面.PageHook

12003

pageHook 是一个配置项，用于在页面加载之前执行某些操作。它可以用于获取数据、执行验证等。pageHook 支持 beforeHook 类型的钩子。

beforeHook

beforeHook 是在页面加载之前执行的钩子。这里，我们将创建一个名为 pageHookDemo.js 的服务，并在其中添加一个名为 demoPageOfBeforeHook 的方法。此方法将返回一个包含 content 属性的对象。

• 新增 /app/service/pageHookDemo.js：

  'use strict';
  const Service = require('egg').Service;
  class PageHookDemoService extends Service {
    async demoPageOfBeforeHook() {
        return { content: '这是一个页面的 beforeHook demo' };
    }
  }
  module.exports = PageHookDemoService;

• 修改 _page 的 pageHook：

  pageId	pageType	pageHook
  demoPage	showInMenu	{"beforeHook":[{"field": "beforeHookResult", "service": "pageHookDemo", "serviceFunc": "demoPageOfBeforeHook"}]}

• 最后，我们将在 /app/view/page/demoPage.html 页面中使用 beforeHook 填充的数据。通过使用 <$ beforeHookResult.content $>，我们可以在页面上显示 beforeHook 获取的内容。

  <v-app>
    <h2>内容: <$ beforeHookResult.content $></h2>
  </v-app>
  <script type="module">
    new Vue({
        el: '#app',
        template: '#app-template',
        vuetify: new Vuetify(),
        data:{
        },
    })
  </script>