Nuxt 2布局文件中mounted()钩子未触发，是否支持该写法？

核心结论 #

Nuxt 2的布局文件（包括default.vue、error.vue）不支持在默认导出中直接使用mounted()这类常规Vue生命周期钩子，这就是你测试时钩子未触发的原因。

原因说明 #

Nuxt 2的布局组件并非完全遵循普通Vue组件的生命周期逻辑，它的渲染流程被框架的页面路由机制接管，常规的客户端生命周期钩子（如mounted、beforeMount）不会在布局组件中正常触发。

替代解决方案 #

• 若需在布局初始化时执行逻辑，改用Nuxt提供的布局专属钩子：asyncData或fetch（这两个钩子会在服务端和客户端都执行，若仅需客户端执行可通过process.client判断）
• 如果只需要客户端执行的逻辑，可以在布局模板中嵌套一个小型子组件，在子组件中使用mounted钩子

针对你的error.vue示例的修改示例 #

比如要在error页面客户端打印状态码，可改用fetch钩子：

<template>
    <div>
        <h1 v-if="error.statusCode === 404">Page not found</h1>
        <h1 v-else>An error occurred</h1>

        <p>error.statusCode=</p>
        {{ error.statusCode }}
    </div>
</template>

<script>
export default {
    props: ['error'],

    fetch() {
        if (process.client) {
            console.log('客户端执行的逻辑');
            console.log(this.error.statusCode);
        }
    }
}
</script>

内容的提问来源于stack exchange，提问作者gvanto