vue项目中修改页面title的方法总结
方法五:如果public文件夹中index.html 中的title是通过<%= htmlWebpackPlugin.options.title %>这种方式设置,则可以用下面的方法进行修改。方法一:查看当前项目的根目录是否有index.html文件,如果有,则直接在该文件的head中修改title标签的内容。方法四:在当前页面的created生命周期里进行添加。方法二:通过全局自定义指令进行修改
·
关于项目中修改页面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;
})
}
更多推荐
已为社区贡献1条内容
所有评论(0)