vue--修改项目浏览器页面的文字和图片

最新推荐文章于 2023-08-15 09:17:44 发布

前端小云儿

最新推荐文章于 2023-08-15 09:17:44 发布

阅读量2k

点赞数

分类专栏： vue技能提升文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/jieweiwujie/article/details/127371187

版权

vue技能提升专栏收录该内容

68 篇文章 3 订阅 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

本文介绍了在Vue项目中如何使用JavaScript修改HTML页面的标题。通过document.getElementsByTagName('title')[0].innerText和document.title两种方式可以实现标题的更新。同时，文章也提及了在路由拦截器中处理和页面内直接设置标题的方法，并提到了修改浏览器页签图标的技巧。

摘要由CSDN通过智能技术生成

title在html中属于特殊的节点元素.因为它可以使用document.getElementsByTagName("title")[0]来获取网页的title标签,但却无法用document.getElementsByTagName("title")[0].innerHtml用更改它的值。经测试原生js有两种方式可以修改
innerText 方式
通过console.log(document.getElementsByTagName("title")[0]),发现能打印出
标签，标签里面只有文字节点，故猜测只能识别TextNode，所以用innerText方式设置title的值，果然成功了。
document.getElementsByTagName("title")[0].innerText = '需要设置的值';

document.title方式

经过测试，还可通过document.title 设置title的值。


 
router.beforeEach((to, from, next) => {
    if (to.meta.title) {
        document.title = to.meta.title
    } else {
        document.title = '默认标题'
    }
    next()

document.get