使用 Vue Router 设置页面标题

Question

I have created a vue-router with a page title (h1). Every vue-router link has a meta-title. How can I dynamically set my h1 page title?

I have tried $emit , but this is not working in my router. How can I change my page title?

 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>

Answer 1

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

{{ $route.meta.title }}

Answer 2

If you would like to have correct browser history use this one:

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

Answer 3

Also if you need to change the document's title-tag, in your router.beforeEach replace this line :

this.$emit('pagetitle', to.meta.title);

with

document.title = to.meta.title;

It will work.