Riotjs -动态挂载标记

Question

如何动态地挂载标记？这就是我所拥有的：

my-app.tag.html

<my-app id="mounting_point"></my-app>

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.mount("#mounting_point", {}, next_page)
            }

        }
    </script>
</nav-menu>

当我单击“Home”时，home-page标记的内容会被附加到#mounting_point容器中，但是当我单击另一个链接时，挂载点的内容不会被替换，而是会被追加。

谢谢你的建议

Answer 1

在DOMNode将标记卸载到挂载标签之前。

传递要卸载的选择器和保留父选项的riot.unmount。

       goTo(e) {
          let next_page = e.target.dataset.page_link;
          riot.unmount('#mounting_point', true);
          riot.mount('#mounting_point', {}, next_page);
        }