使用NuxtJSVueJS和<keep-alive />突变问题设置动态ActionBar标题

问题描述

通常，我使用 VueCLI3 为具有Vuetify属性（种类繁多）的 ActionBar （例如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'
    ])
  },}

// in some routed page,eg: index.vue
export default {
  created() {
    this.$store.commit('setActionTitle','Medical Service BD')
  },}

当我使用 <nuxt keep-alive /> 或使用 cached 组件时，会发生问题。此缓存不会提交这些突变，因此操作栏标题的最后一个标题保持不变。

哪种方法应该适合动态标题设置？

解决方法

我从reddit找到的解决方案是使用activated方法。示例：

export default {
  activated() {
    this.$store.commit('setActionTitle','Medical Service BD')
  },}