在 Node-RED Dashboard 2.0 中，導覽列的內容是動態生成的，這意味著每次切換頁面時，Vue 會重新渲染導覽列。這導致使用 <Teleport> 插入的 LOGO 只在部署後立即可見，但切換到其他頁面後就消失了。
為了解決這個問題，我們需要確保 LOGO 每次導覽列重新渲染時都能被正確掛載。這可以透過 生命週期鉤子 (mounted 和 updated) 來實現，確保 LOGO 在每次 Vue 更新時都會重新插入。
🚀 改進版解決方案
<template>
<div></div> <!-- 保持模板結構 -->
</template>
<script>
export default {
methods: {
insertLogo() {
const target = document.querySelector('#app-bar-title');
if (target && !document.getElementById('custom-logo')) {
const logo = document.createElement('img');
logo.src = 'https://example.com/logo.png'; // 替換為你的 LOGO 圖片連結
logo.alt = 'LOGO';
logo.id = 'custom-logo';
logo.style.height = '32px';
logo.style.marginRight = '10px';
logo.style.verticalAlign = 'middle';
target.prepend(logo); // 將 LOGO 插入至標題最前方
}
}
},
mounted() {
this.insertLogo(); // 當元件首次掛載時插入 LOGO
},
updated() {
this.insertLogo(); // 每次頁面更新後再確認 LOGO 是否存在
}
}
</script>
📌 關鍵改動說明
insertLogo() 方法：
- 檢查導覽列是否已存在 LOGO，避免重複插入。
- 使用
prepend() 方法，確保 LOGO 始終出現在標題的最前方。
mounted() 和 updated() 生命週期鉤子：
mounted()：在元件初次掛載時插入 LOGO。updated()：當頁面切換或 Vue 更新 DOM 時，重新檢查並插入 LOGO，確保 LOGO 不會因為 Vue 的重新渲染而消失。
避免重複插入：
- 透過
document.getElementById('custom-logo') 來檢查 LOGO 是否已存在，避免因多次更新而出現多個 LOGO。
✅ 測試步驟
- 將上述程式碼部署到 Node-RED。
- 切換 Dashboard 中的不同頁面，確認 LOGO 是否始終存在於導覽列上。
- 如需微調 LOGO 的位置或大小，可以調整
style 屬性中的 height、marginRight 等參數。
這個方法能確保 LOGO 在每次頁面切換後仍然保持可見，並且不會出現重複插入的問題。