Как изменить элементы в заголовке на основе определенной страницы в nuxt - PullRequest
Новая
       18

Как изменить элементы в заголовке на основе определенной страницы в nuxt

0 голосов
/ 26 января 2020

В моем приложении nuxt у меня есть заголовок. Основываясь на странице, на которой я нахожусь, мне нужно изменить элементы заголовка. Эти элементы являются ссылками на различные части страницы. Я не хочу добавлять заголовок к каждой странице отдельно. Я хочу поместить заголовок в макет по умолчанию. Как я могу это реализовать?

1 Ответ

0 голосов
/ 26 января 2020

Я бы использовал роутер. js модуль с вложенными маршрутами: 

// 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 по умолчанию маршрутизатор.

...