首页 文章

使用nuxt,如何将路径名称放在页面 Headers 中?

提问于
浏览
1

我想将页面 Headers 设置为每个页面的不同值 .

在常规的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中获得这种效果?

也就是说,在初始页面加载和更改页面时,我希望浏览器选项卡的 Headers 发生变化 . 例如,从“我的应用程序 - 关于”到“我的应用程序 - 配置文件” .

2 回答

  • 1

    nuxt docs开始,在每个 pages 组件中,您可以定义返回页面 Headers 的头函数,即

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

    我找到了一种方法来做到这一点,但我不知道它是否是"right"方式 . 我使用 default.vue 中的 mounted() 函数作为初始页面加载,并使用 nuxt.config.js 中的 transition 属性进行每页更改 . 所以,在 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;
        }
    },
    

相关问题