从 Nuxt.js 中的页面更改布局变量值答案

【问题标题】：Change a layout variable value from a page in Nuxt.js从 Nuxt.js 中的页面更改布局变量值
【发布时间】：2020-07-25 01:03:57
【问题描述】：

关于 Vue / Nuxt 有一些我真的不明白的地方，如果我在我的 /blog/slug.vue 中导入一个组件，我可以根据需要更改变量，但是我该怎么做？ /layouts/default.vue ？我可以通过使用 head() 来做到这一点，但我可以使用像 {{ navbar_title }}

这样的简单变量来做到这一点

例如我的 /layouts/default.vue 看起来像这样：

<template>
  <div class="navbar">
    {{ navbar_title }} 
  </div>
</template>

是否可以从 /pages/about.vue 之类的页面更改 {{ navbar_title }} 值？

【问题讨论】：

标签： vue.js nuxt.js

【解决方案1】：

请访问代码沙箱link

代码

在NavBar.vue

<template>
  <div>NavBar component  {{ title }}</div>
</template>

<script>
export default {
  props: {
    title : {
      type: String,
      required: true,
      default: 'Website title/ suitable title'
    }
  }
}
</script>

来自页面组件pages/index.vue

<template>
  <section>
    <div>
      <NavBar :title="title"/>
      <h2>Starter for CodeSandBox</h2>
    </div>
  </section>
</template>

<script>
import NavBar from '~/components/NavBar.vue'

export default {
  pageTitle: 'from Home Page',
  components: {
    NavBar
  },
  computed: {
    title() {
      return this.$route.matched.map((r) => {
        return r.components.default.options
          ? r.components.default.options.pageTitle
          : r.components.default.pageTitle;
      })[0];
    }
  }
}
</script>

【讨论】：

谢谢，但这不是我的问题，我想使用相同的布局并根据需要更新标题。
不，我的意思是 navbar_title
@Tahola 使用正确的解决方案代码沙箱链接更新了我的答案codesandbox.io/s/jolly-cori-3l08v 如果您仍有疑问，请更新我！！
太完美了，对初学者很有帮助，非常感谢！