vue动态index.html默认标题

2022-07-11 21:46:14

使用场景

项目的某些页面需要单独打开
页面加载完成之前就需要展示标题
标题不能在index.html写死，因为各页面标题不一样

用法

vue的index.html文件中修改

<!DOCTYPE html>
<html lang="en">
<head>
<!--这里省略部分代码-->
 <title>默认标题</title>
    <script>
        //动态标题
        var domainUrl = document.location.toString();
        if (domainUrl.indexOf("特殊的url内容") !== -1) {
            document.title = "新的标题";
        }
    </script>

后话

开发中没注意，上线后网络环境变了，发现页面需要加载时间，加载完之前标题一直显示 Webpack App ，用了上面这个方法来处理。

ps:项目标题通过vue router来动态控制的，所以页面加载之前的标题没有被控制到

vue动态index.html默认标题