Vue 2 动态修改网站标题为什么不生效？

Question

router.beforeEach((to, from, next) => {
  document.title = to.meta.title ? to.meta.title 
  next()
})

使用上述方法，只有第一个页面标题使用的是 meta 里面的标题，跳转到其他页面就无法识别 meta 里面的标题，希望大佬们能指点一下，万分感谢

这是router 里 index.js 的源码和 App.vue 源码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import SciPage from '@/views/SciPage'
import Soft from '@/views/Soft'
import Tool from '@/views/Tool'
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    meta: {
      title: '首页导航'
    }
  },
  {
    path:'/sci',
    name:'sci',
    component: SciPage,
    meta: {
      title: '学术科研'
    }
  },
  {
    path:'/soft',
    name:'sofa',
    component:Soft,
    meta: {
      title: '软件开发'
    }
  },
  {
    path:'/tool',
    name:'tool',
    component:Tool,
    meta: {
      title: '实用工具'
    }
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  routes
})

const defaultTitle = '默认 title'
router.beforeEach((to, from, next) => {
  document.title = to.meta.title ? to.meta.title : defaultTitle
  next()
})


export default router

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import HomeViewVue from './views/HomeView.vue';
import HomeView from './views/HomeView.vue';
export default {
  name: 'app',
  components: {
    HomeViewVue,
    HomeView
}
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Answer 1

检查一下三目运算

Answer 2

细心就好，人傻了 被发现自己傻的时候 挺可爱的 哈哈
已参与 「极客观点」 ，欢迎正在阅读的你也加入。