如何根据nuxt中的特定页面更改标题中的项目答案

【问题标题】：How to change items in header based on a particular page in nuxt如何根据nuxt中的特定页面更改标题中的项目
【发布时间】：2020-05-12 00:43:03
【问题描述】：

在我的 nuxt 应用程序中，我有一个标题。根据我所在的页面，我需要更改标题的项目。这些项目是指向页面不同部分的锚链接。我不想单独为每个页面添加标题。我想将标题放在默认布局中。如何实现？

【问题讨论】：

您可以使用$route.params 来检测您所在的页面，并据此在标题中显示所需的链接。看看这个：stackoverflow.com/questions/44748575/…
假设我在 nuxt 中有 7 页。我需要每个特定的标题，并且标题包含指向该页面不同部分的锚链接。在您提出的方法中，标头会变得太大。
您可以将所有按页面名称分组的锚链接和标题放在商店中，并根据 $route 获取活动组，它们会使用 v-for 将它们显示在您的标题中

标签： nuxt.js

【解决方案1】：

我会将router.js module 与嵌套路由一起使用：

// router.js
import Vue from 'vue'
import Router from 'vue-router'

import MyFirstPage from '~/components/my-first-page'
import MySecondPage from '~/components/my-second-page'
import MyThirdPage from '~/components/my-third-page'

import MyHeaderA from '~/components/my-header-a'
import MyHeaderB from '~/components/my-header-b'

Vue.use(Router)

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        components: {
          header: MyHeaderA,
          content: MyFirstPage,
        } 
      },
      {
        path: '/b',
        components: {
          header: MyHeaderB,
          content: MySecondPage,
        } 
      },
      {
        path: '/c',
        components: {
          header: MyHeaderA,
          content: MyThirdPage,
        } 
      },
    ]
  })
}

// layout/default.vue
<template>
  <div>
    <nuxt name="header
    <nuxt name="content"></nuxt>
  </div>
</template>

我认为这比默认的 nuxt 路由器允许更多地控制页面中的路由和组件。

【讨论】：

其实我一直在寻找一个有共享标题的解决方案。不是每个页面的标题