element+vue 动态修改favcion及系统名称

csdn0408

于 2021-04-15 14:22:37 发布

阅读量443

点赞数

分类专栏： element

本文链接：https://blog.youkuaiyun.com/csdn0408/article/details/115722771

版权

element 专栏收录该内容

1 篇文章

订阅专栏

该博客介绍了如何在Vue应用中实现动态修改favicon图标和系统名称。在用户登录时，从localStorage获取用户信息，包括自定义的favicon路径和系统名称，然后更新文档标题和 favicon。通过创建或查找link标签并设置href属性来实现图标变更，重新登录后更改即生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element+vue 动态修改favcion及系统名称

首先要有favcion上传功能，修改后将favcion及系统名称存入数据库，具体可搜索添加，目前主要介绍变更favcion；

登录时将获取的当前用户信息存入localstory，APP.VUE页面，获取localstory内存放的数据，如下：
created () { if (localStorage.getItem('menus') !== null) { this.currentUser = JSON.parse(localStorage.getItem('currentUser')) document.title = this.currentUser.programName var link = document.querySelector("link[rel~='icon']") if (!link) { link = document.createElement('link') link.rel = 'icon' document.getElementsByTagName('head')[0].appendChild(link) } if (this.currentUser.favicon !== null) { // this.URL为文件统一下载路径，favcion存放的文件的相对路径 link.href = this.URL + this.currentUser.favicon } } }