Vue修改单页面标题title

使用vue-cli在项目创建时会有一个统一默认的title（默认是创建项目的名称），会有根据不同组件（单页面）有不同标题title的需求。

1、在router里每个组件下增加meta

{
    path: '/', //用户登录默认页
    name: 'Login',
    component: Login,
    meta:{
      title:"登录"
    }
  },{
    path: '/Regist', //用户注册页
    name: 'Regist',
    component: Regist,
    meta:{
      title:"注册"
    }
  },{
    path: '/PassWord', //忘记密码页
    name: 'PassWord',
    component: PassWord,
    meta:{
      title:"忘记密码"
    }
  },{
  ……
  }

2、在main.js里添加如下代码

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

即可实现根据不同的router，改变不同的标题title。