应用程序已经挂载.当再次打开页面时，什么也没有显示

Question

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

}

应用程序是用vejs和blazor开发的。在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>

首先打开这个页面，所有的内容都可以显示出来。如果我离开它，回到这一页，什么也没有显示。有一个警告说

"[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)`".

我如何修复这个警告，使我的内容显示没有刷新时回来。

感谢

Answer 1

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

但是我在你的HTML中只能看到一个IDcontainer。

将你的应用挂载到容器中，或者在你的HTML中添加ID#ticker-maintenance-host。

#编辑:

你不需要在每次渲染时都挂载你的视图应用程序，只在网站最初加载时。

像这样直接从vue 3的文档中找到的东西是如何注册一个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");

更多阅读在这里:Vue。createApp不工作，但正在使用new Vue()方法

Answer 2

我通过移动函数块内的所有语句来修复它。

//main.js

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

}