Riot.js动态挂载标签问题：切换菜单内容重复追加而非替换

API 探路者

2026-8-22

解决Riot.js标签动态挂载时内容重复追加的问题

核心原因

riot.mount() 方法默认会在目标容器内追加新组件，而非替换已有内容，多次点击自然会导致组件堆叠。

解决方案

在挂载新组件前，先卸载挂载点内已有的Riot组件，确保容器清空后再挂载新内容：

修改`nav-menu.tag.html`的`goTo`方法

goTo(e) {
    let next_page = e.target.dataset.page_link;
    // 先卸载挂载点内所有已挂载组件，同时移除对应DOM元素
    riot.unmount('#mounting_point', true);
    // 再挂载目标组件
    riot.mount('#mounting_point', next_page);
}

说明：riot.unmount(selector, true)的第二个参数true表示彻底移除组件关联的DOM节点，避免残留内容；若仅卸载组件逻辑保留DOM，可省略该参数。

完整修改后的`nav-menu.tag.html`代码

<nav-menu>
    <div class="menu_page">
        <div class="menu_page__items">
            <a onclick="{goTo}" class="menu_page__item" data-page_link="home-page">Home</a>
            <a onclick="{goTo}" class="menu_page__item" data-page_link="about-page">About</a>
            <a onclick="{goTo}" class="menu_page__item" data-page_link="contact-page">Contact</a>
        </div>
    </div>

   <script>
        export default {
            goTo(e) {
                let next_page = e.target.dataset.page_link;
                riot.unmount('#mounting_point', true);
                riot.mount('#mounting_point', next_page);
            }
        }
    </script>
</nav-menu>