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

Posted 2023-02-22

【中文标题】如何根据nuxt中的特定页面更改标题中的项目

【英文标题】：How to change items in header based on a particular page in nuxt

【发布时间】：2020-05-12 00:43:03

【问题描述】：

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

【问题讨论】：

您可以使用$route.params 来检测您所在的页面，并据此在标题中显示所需的链接。看看这个：***.com/questions/44748575/…

假设我在 nuxt 中有 7 页。我需要每个特定的标题，并且标题包含指向该页面不同部分的锚链接。在您提出的方法中，标头会变得太大。

您可以将所有按页面名称分组的锚链接和标题放在商店中，并根据 $route 获取活动组，它们会使用 v-for 将它们显示在您的标题中

【参考方案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 路由器允许更多地控制页面中的路由和组件。

【讨论】：

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