vue动态index.html默认标题

时间:2024-03-06 16:41:42

使用场景

  • 项目的某些页面需要单独打开
  • 页面加载完成之前就需要展示标题
  • 标题不能在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来动态控制的,所以页面加载之前的标题没有被控制到