Web前端(10)-vue中如何修改一个网页的title

vue开发的网页中，有两种标题，一种是初始加载网页的标题，然后路由跳转到某个组件后，显示组件配置的标题。

初始加载的标题

可以通过vue.config.js中配置默认的网页标题：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      title: '初始加载时的标题'
    }
  }
})

组件标题

通过在route/index.js中配置路由来设置组件标题。

const routes = [
  { path: "/", component: LoginPage, meta:{title:'登录'} },
  { path: '/homepage', component: HomePage, meta:{title:'首页'} }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

// 这里代表路由跳转前的钩子，可以在此处执行配置跳转到组件后的title
// to代表路由跳转的组件页面，from代表当前组件页面，next代表执行路由跳转后续方法。
// 通过document.title设置当前网页title为routes中配置的meta.title，即目标组件的title。
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  next();
});

这样首次打开网页和路由跳转我们都能控制title如何展示了