vue项目中修改页面title的方法总结

关于项目中修改页面title的方法总结如下：

方法一：查看当前项目的根目录是否有index.html文件，如果有，则直接在该文件的head中修改title标签的内容。

方法二：通过全局自定义指令进行修改。

// 设置修改页面标题的自定义指令
const title = vue.directive('title', {
inserted: function(el) {
    document.title = el.getAttribute('title');
}
})

// 使用自定义指令的方法
<template>
  <div class="app" v-title title="这是标题"></div>
</template>

方法三：通过路由配置文件进行修改。

const routes = [
  {
    path: '/',
    name: 'login',
    component: login,
    meta: {
      title: '登录',
    }
  }
]

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

router.beforeEach(async (to) => {
  if (to.meta.title) { // 判断是否有标题
    document.title = to.meta.title;
  }
});

方法四：在当前页面的created生命周期里进行添加。

created() {
  document.title = '这是标题';
}

方法五：如果public文件夹中index.html 中的title是通过<%= htmlWebpackPlugin.options.title %>这种方式设置，则可以用下面的方法进行修改。

// vue.config.js
chainWebpack: config =>{
    config.plugin('html')
      .tap(args => {
        args[0].title = "标题";
        return args;
      })
  }