Используя nuxt, как мне указать название маршрута в заголовке страницы?

Question

Используя nuxt, как мне указать название маршрута в заголовке страницы?

1

Я хочу, чтобы заголовок страницы имел другое значение для каждой страницы.

В обычном Vue.js я сделал следующее:

import router from './router'
import { store } from './store/store';

router.beforeEach((to, from, next) => {
    store.mutations.setRoute(to);
    document.title = store.getters.pageTitle;
    next();
}

Как я могу получить этот эффект в nuxt?

То есть, как при загрузке начальной страницы, так и при смене страниц, я хочу изменить заголовок вкладки браузера. Например, от "Мое приложение - О" до "Мое приложение - Профиль".

Paulie 16 янв. 2018, в 17:54

Источник

Теги:

javascript

vue.js

vue-router

nuxt.js

2 ответа

1

Я нашел способ сделать это, но я не знаю, является ли это "правильным" способом. Я использую функцию nuxt.config.js mounted() в default.vue для начальной загрузки страницы и свойства transition в nuxt.config.js для каждой смены страницы. Итак, в default.vue:

...mapGetters(['appTitle']),
...mapMutations(['setRoute']),
mounted() {
    this.setRoute(this.$route.name);
    document.title = this.appTitle();
}

И в nuxt.config.js:

transition: {
    name: 'page',
    mode: 'out-in',
    beforeEnter (el) {
        this.$store.commit("setRoute", this.$route.name);
        document.title = this.$store.getters.appTitle;
    }
},

Paulie 16 янв. 2018, в 15:58

0

ты посмотрел на мой ответ?
Lahori 16 янв. 2018, в 17:04

Ещё вопросы

Lahori · Accepted Answer · 2018-01-16T14-48-00.000Z

из nuxt docs в каждом компоненте pages вы можете определить функцию head, которая возвращает заголовок страницы, т.е.

head() {
    return {
      title: "About page"
    };
  }

В основном это работает - я могу вставить статическое имя страницы, но это не для всех случаев. Я бы хотел использовать хранилище vuex для вычисления имени страницы, потому что в некоторых случаях оно будет содержать звездочку. Но в сочетании с mount () {document.title =} работает отлично. Спасибо!