Настройка динамического заголовка ActionBar с помощью NuxtJS (VueJS) и проблемы мутации <keep-alive/>


Настройка динамического заголовка ActionBar с помощью NuxtJS (VueJS) и проблемы мутации &lt;keep-alive/&gt;

11.08.2020 12:11:28 Просмотров 1 Источник

Обычно с VueCLI3я устанавливал динамические заголовки для ActionBar (например, Vuetify) со свойствами vue-router meta (вроде статических, так как они настроены в файле router.js)

Пример:

// router.js

const routes = [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta : {
        title : 'Welcome Home',
      }
    },
]

// in App.vue 
<template>
  <v-app>
    <ActionBar :title="$route.meta.title"></ActionBar>
    <router-view></router-view> 
  </v-app>
</template>

С Nuxt.JS, я все равно не смог бы найти, чтобы установить route-meta, поэтому я использовал Vuex.store getter и mutations для установки заголовков в магазине и выборки в основном макете.

Пример:

// in mainLayout.vue
<template>
  <v-app dark> 
    <v-app-bar app color="primary" dark>
      <v-toolbar-title v-text="actionTitle" />
    </v-app-bar>

    <v-main>
      <v-container>
        <nuxt keep-alive />
      </v-container>
    </v-main>

  </v-app>
</template>

<script>
export default {
  computed: {
    ...mapGetters([
      'actionTitle'
    ])
  },
}

vue-router meta0

Проблема возникает, когда я использую vue-router meta1 или использую кэшированные компоненты. Это кэширование не фиксирует эти мутации, поэтому заголовок панели действий остается статичным для последнего заголовка.

Какой метод должен быть подходящим для динамической настройки заголовка?

javascript vue.js nuxt.js
У вопроса есть решение - Посмотреть?

Ответы - Настройка динамического заголовка ActionBar с помощью NuxtJS (VueJS) и проблемы мутации &lt;keep-alive/&gt; / Setting up dynamic ActionBar Title using NuxtJS (VueJS) and <keep-alive/> mutation problem

Является ответом!
Jalal Uddin

08.09.2020 09:19:57

Решение, которое я нашел в reddit, заключается в использовании метода activated. Пример:

export default {
  activated() {
    this.$store.commit('setActionTitle', 'Medical Service BD')
  },
}
Источник
Помочь в развитии проекта:

Другие вопросы

Ответы на ваши вопросы

Закрыть X