如何基于nuxt中的特定页面更改标题中的项目

Question

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

Answer 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路由器相比，它可以对页面中的路由和组件进行更多控制。