Vue项目动态修改单页应用页面标题(title)

我们在使用Vue做公众号、手机端、pc端、小程序等的单页应用时，会有动态改变每个页面标题的需求，我们可以通过配置路由的meta信息，然后在main.js里通过router.beforeEach(function(to, from, next))里动态改变title的方法来实现。

路由配置

routes: [
    {
          path: '/home/:openname',
          name:'home',
          component: Home,
          meta: {
            title: '首页'
        }
    }
  ]

主要代码

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title;
  }else{
    document.title = "这里可以给默认标题";
 }
  next();
})