Vue 设置每个页面的头部对应 title

Vue 单应用在入口 index.html 文件中设置一次页面的 title，之后每个页面都会显示同一个 title ，现在需要每个页面有不同的 title 如何实现呢？
只需两步搞定：

# 第一步：在 router.js 中每一个路由下面多添加一个 meta 属性，举个栗子：

{
    path: '/login',
    name: 'login',
    meta:{
      title: '登陆/注册'
    },
    component: () => import('./views/Login')
},
{
    path: '/home', 
    name: 'home',
    meta:{
      title:'个人中心'
    },
    component: () => import('./views/home'),
}

# 第二步：然后在 main.js里面添加以下代码

// 路由发生变化修改页面 title 
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

搞定，超级简单，赶快试试吧~~_{记得点赞哦}~~