应用程序已安装。再次打开页面时没有显示答案

【问题标题】：App has already been mounted. nothing show up when open page again应用程序已安装。再次打开页面时没有显示
【发布时间】：2021-12-11 09:54:01
【问题描述】：

// main.js

const app = createApp(App);
app.provide('$axios', axios);

window.renderSomething = function() {  

   app.mount('#ticker-maintenance-host');   
        
}

该应用程序是使用 vuejs 和 blarzor 开发的。在 blazor 中，会调用它

@inject IJSRuntime JS;

@code{
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("renderSomething");
        }
    }
}


@page "/dashboard/page1"

<div id="ticker-maintenance-host"></div>

首先打开这个页面1，所有的内容都可以显示出来。如果我离开它并返回此页面，则没有任何显示。有个警告说

"[Vue warn]: App has already been mounted.
If you want to remount the same app, move your app creation logic into a factory function and create fresh app instances for each mount - e.g. `const createMyApp = () => createApp(App)`".

如何解决此警告并让我的内容在返回时显示而不刷新。

谢谢

【问题讨论】：

标签： vue.js blazor vuejs3

【解决方案1】：

您正在将您的应用安装到 ID #ticker-maintenance-host

但我在你的 HTML 中只能看到一个 ID container。

将您的应用装载到容器中，或将 ID #ticker-maintenance-host 添加到您的 HTML。

#编辑：

您无需在每次渲染时都安装视图应用，只需在网站最初加载时即可。

Vue3 文档中的类似内容是您注册 vue 应用程序的方式：

const { createApp, ref, computed } = Vue;
const app = createApp({
  setup() {
    const someValue = ref(10);
    const someComputed = computed(() => someValue.value * 10);
    return {
      someValue,
      someComputed
    }
  }
});
app.mount("#ticker-maintenance-host");

【讨论】：

抱歉，已更改该 ID。但如果我改变 const app = createApp(App);到 const app = () => createApp(App)。它显示 app.provide、app.use 和 app.mount 不是一个函数。如果我更改该行代码，如何在这里编写我的代码。
对不起，我假设您使用的是 vue3，您实例化它的方式是正确的
我相信这个问题是你的函数OnAfterRenderAsync() 一直在运行，但是你的应用程序已经挂载了。您不需要在每次渲染时都安装它。
抱歉，我仍然不知道如何解决我的问题。你能提供更多细节吗？
firstRender 看起来每次或大多数时候都以 true 的形式传入，因此您的应用正在被双重安装。

【解决方案2】：

我已经通过移动功能块内的所有语句来修复它。

// main.js

window.renderSomething = function() {  
    const app = createApp(App);
    app.provide('$axios', axios);
    app.mount('#ticker-maintenance-host');  
    
}

【讨论】：