使用Vue Router设置页面标题

Question

我创建了一个带有页面标题（h1）的 vue-router。每个 vue-router 链接都有一个 meta 标题。如何动态设置我的 h1 页面标题？

我尝试使用 $emit，但这在我的路由器中不起作用。如何更改我的页面标题？

const dashboard = {
  template: `<div>DASHBOARD</div>`
}
const about = {
  template: `<div>ABOUT</div>`
}

const routes = [
  {path: '/dashboard', component: dashboard, name:'dashboard', meta: { title: 'Dashboard' }},
  {path: '/about', component: about, name:'about', meta: { title: 'About' }}
]
const router = new VueRouter({
  routes // short for routes: routes
})

router.beforeEach((to, from, next) => {
  this.$emit('pagetitle', to.meta.title); // DOESN'T WORK!!
  next();
});

new Vue({
  el: '#app',
  router,
  data() {
    return {
      pagetitle: 'not set'
    }
  },
  watch: {
    '$route': function(value) {
    // I can use things like value.name === 'about', but "watch" doesn't set the page title at the first page load.
    }
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <router-link to="/dashboard">Dashboard</router-link>
  <router-link to="/about">About</router-link>
  <router-view></router-view>
  <h1 v-text="pagetitle"></h1>
  How can I change the page title???
</div>

- angelique000

Answer 1

在你的<h1></h1>标签中，只需使用以下内容

{{ $route.meta.title }}

- Ru Chern Chong

---

抱歉，它不起作用。我收到一个错误：“$routes”未定义。 - angelique000

@angelique000 你好，这是一个拼写错误。应该是 $route 而不是 $routes。感谢您的评论并指出了它。 - Ru Chern Chong

Answer 2

如果您想要正确的浏览器历史记录，请使用这个：

router.afterEach((to, from) => {
  Vue.nextTick( () => {
    document.title = to.meta.title ? to.meta.title : 'default title';
  });
})

- Nick Kos

---

谢谢，你的评论帮了很大的忙。你使用nextTick有什么原因吗？ - Mark Walet

Vue.nextTick() 是一个命令，它指示 Vue 等待当前 DOM 更新之后再执行，这意味着它会在 UI 绘制完成之后再次绘制。将 tick 比作时间的一个瞬间的类比。UI 是一个循环渲染过程。绘制过程是同步和确定性的，并且一遍又一遍地重复。Vue.nextTick() 表示“等到下一次绘制，以确保当前状态已经解决”。 - agm1984

你也可以在类似 async () => { await Vue.nextTick(); this.val = 'new'; } 这样的语法中，在异步函数内部使用 Vue.nextTick()。请注意，使用它作为返回promise的sleep函数和使用第一个参数作为"continuation passing style"回调函数之间的区别。你可以像梦中一样堆叠它们，但是尽量保持最大深度为1，以避免出现“圣诞树”般的回调地狱调试问题。 - agm1984

@agm1984，你解释了nextTick的作用，但没有解释为什么它在这里是必要的。 - kano

Vue 不会重新渲染除了它被挂载到的 HTML 元素之外的任何东西。通常情况下，这意味着除了 body.div#app 之外的任何内容都不会被重新渲染。由于标题位于 head.title 中，超出了 body 的范围，因此不受 Vue 的影响。因此不需要使用 nextTick()。 - Valentine Shi

Answer 3

如果您需要更改文档的标题标签，在router.beforeEach中，请将以下行替换为：

document.title = to.meta.title;

它会起作用。

- Benjamin Arthuys