Vue项目中路由跳转时如何更改title的值

不同页面有不同的 title，那么如何动态改变 title 的值呢？
涉及到两个文件的修改：src/main.js 和 src/router/index.js。

1. 在 main.js 文件中注册一个全局的前置守卫：

router.beforeEach(function (to, from, next) {
  if (to.meta.title) {
    document.title = to.meta.title;
    // 确保调用 next()，否则不会跳转
  } else {
    // 如果没有，也可以用个默认的
    document.title = "默认名称";
  }
  next();
});

router.beforeEach 的参数：

• to: 要跳转的目标路由对象
• from: 当前要离开的路由对象
• next: 是个函数，确保要调用，否则不会跳转

2. 在 index.js 文件中增加 meta 属性：

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    // 要增加的 meta 属性
    meta: {
      title: '首页'
    }
  },
  {
    path: '/ClassifyView',
    name: 'ClassifyView',
    component: () => import('../views/ClassifyView.vue'),
    // 要增加的 meta 属性
    meta: {
      title: '商品分类'
    }
  }
];