vue3: 動態修改favicon(網站的ico 圖示)([email protected])
阿新 • • 發佈:2022-02-20
一,把baidu的icon儲存到本地:
在本地增加一個icon供測試用: 訪問:https://www.baidu.com/favicon.ico
儲存到public目錄下,
名字儲存為 faviconbd.ico說明:劉巨集締的架構森林是一個專注架構的部落格,地址:https://www.cnblogs.com/architectforest
對應的原始碼可以訪問這裡獲取:https://github.com/liuhongdi/
或:https://gitee.com/liuhongdi
說明:作者:劉巨集締 郵箱: [email protected]
二,js程式碼:
Icon.vue<template> <div> <button @click="changeIco('bd')">修改為百度ico</button><br/> <button @click="changeIco('vue')">修改為Vue ico</button><br/> </div> </template> <script> export default { name: "Icon", setup () { //修改Favicon的方法 const changeFavicon= link => { let $favicon = document.querySelector('link[rel="icon"]'); if ($favicon !== null) { $favicon.href = link; } else { $favicon = document.createElement("link"); $favicon.rel = "icon"; $favicon.href = link; document.head.appendChild($favicon); } };//根據傳遞的引數修改Favicon const changeIco = (type) => { // 得到圖示地址 let iconUrl if (type=='bd') { iconUrl = `./faviconbd.ico` } else { iconUrl = `./favicon.ico` } changeFavicon(iconUrl); } return { changeIco, } } } </script> <style scoped> </style>
三,測試效果
原始狀態 、使用vue的icon 點選 修改為百度ico後四,檢視vue的版本:
liuhongdi@lhdpc:/data/vue/demo1$ npm list vue demo1@0.1.0 /data/vue/demo1 ├─┬ @vue/cli-plugin-babel@4.5.15 │ └─┬ @vue/babel-preset-app@4.5.15 │ └── vue@3.2.26 deduped ├─┬ element-plus@1.2.0-beta.6 │ ├─┬ @element-plus/icons-vue@0.2.4 │ │ └── vue@3.2.26 deduped │ ├─┬ @vueuse/core@7.4.1 │ │ ├─┬ @vueuse/shared@7.4.1 │ │ │ └── vue@3.2.26 deduped │ │ ├─┬ vue-demi@0.12.1 │ │ │ └── vue@3.2.26 deduped │ │ └── vue@3.2.26 deduped │ └── vue@3.2.26 deduped └─┬ vue@3.2.26 └─┬ @vue/server-renderer@3.2.26 └── vue@3.2.26 deduped