SPA修改页面title - Githubissues

上面那个方法可以但是要修改的地方很多每个页面都要处理
同事的想法很简单(title写在路由对象里)每次从路由里设置title值我感觉这方法极好接下来就查找实现方案：路由导航钩子可以实现只在一个地方取到路由的某个字段值并统一设置
路由对象只有几个固定的属性我试了下自定义新增属性结果不起作用仔细看了路由元信息里有一个meta可以设置值demo里是这么写的 meta: { requiresAuth: true }直接给meta添加属性结果发现成了轻松搞定 全部代码如下

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: { pageName: 'testTitle' },
    },
  ],
});
router.beforeEach((to, from, next) => {
  // eslint-disable-next-line
  console.log(to, from);
  document.title = to.meta.pageName;
  next();
});
export default router;

openks / learn-vue

SPA修改页面title #42