【无标题】

编写插件

nuxt-demo2\plugins\ctx-inject.js

// context 上下文对象
// inject 同时将方法注入到context和vue实例和store中
export default ({app}, inject) => {
    app.myContextFunction = (str) => {
        console.log("在context插件中的参数值", str)
    }
}

引入插件

nuxt-demo2\nuxt.config.js

export default {
  ...

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    "./plugins/vue-inject.js",
    "./plugins/ctx-inject.js",
  ],
  ...
}

使用插件

nuxt-demo2\pages\plugins\plugin-ctx.vue

在这<template>
    <div>
        
    </div>
</template>

<script>
export default {
    name: 'NuxtDemo2PluginCtx',
    layout (context) {
        context.app.myContextFunction('context 987')
        return "blog/index"
    },

    asyncData (context) {
        context.app.myContextFunction('context 669')
    }
};
</script>

<style lang="scss" scoped>

</style>

运行结果
【无标题】_第1张图片

你可能感兴趣的:(vue.js,javascript,ecmascript)