Page.PageHook

12003

pageHook is a configuration option used to run certain operations before a page loads. It can be used to fetch data, perform validation, and more. pageHook supports beforeHook-type hooks.

beforeHook

beforeHook runs before the page loads. In this example, we’ll create a service named pageHookDemo.js and add a method demoPageOfBeforeHook. This method returns an object containing a content property.

• Add /app/service/pageHookDemo.js:

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

• Modify the _page table’s pageHook:
  | pageId | pageType | pageHook |
  |--------|-----------|----------|
  | demoPage | showInMenu | {"beforeHook":[{"field": "beforeHookResult", "service": "pageHookDemo", "serviceFunc": "demoPageOfBeforeHook"}]} |

• Finally, use the data populated by beforeHook on the page /app/view/page/demoPage.html. By using <$ beforeHookResult.content $>, you can display the content fetched by beforeHook on the page:

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