工作-vue动态修改标题

背景

最近做了好多事情，没时间整理，最近还是要每天固定整理一波新接触的东西，不断沉淀。今天就简单整理一下动态修改标题。VUE是一个单页面，一般我们都会在index.html中去修改我们要展示的标题。比如下面：

但是如果在同一个项目下，不同的页面，我想要展示不同的标题应该怎么处理呢？

解决

搜索了一番，找到了以下一些办法。

1、document.title=“xxx”

这也是我本次采取的办法。（看好多博客说这个比较笨，但是我个人觉得还行啊）

 created () {
    document.title = '中秋快乐'
 },

2、Vue-Router的beforeEach拦截

{
      path: '/',
      name: 'home',
      component: () => import('@/pages/home/index'),
      meta:{
      	title: '中秋快乐',
        keepAlive: true
 }

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

总结

上述两种办法就可以满足我们动态修改标题的场景啦～～