webpack - vue-cli构建的项目如何设置每个页面的title

问题描述

问 题

在使用vue-cli构建的项目构建多页面项目的时候如何为每个页面设置不同的title？

---

app是入口
scan和usercenter是两个页面

路由中这么写

export default new Router({
  routes: [
    {
      path: '/scan',
      name: 'scan',
      component: Scan
    }, {
      path: '/usercenter',
      name: 'usercenter',
      component: UserCenter
    }
  ]
})

问题是如何给两个页面设置不同的pageTitle呢？

第一次提问，如有不妥，请多指教。

解决方案

在路由里每个都添加一个meta

[
  {
     path:'',
     meta: {
       title: '首页'
     },
     component:''
   }
]

钩子函数

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

这篇关于webpack - vue-cli构建的项目如何设置每个页面的title的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！