Javascript 如何将Vue.Js App.Vue与.Cshtml Razor视图HTML集成？C#Asp.Net MVC 5

我知道有一大堆问题与s/O上发布的问题非常相似，但我仍然找不到一个可行的解决方案来很好地混合App.vue（包含两个自定义组件）和一个包含HTML的Razor视图

我能够在_Layout.cshtml文件上渲染组件，但是当这种情况发生时，它会覆盖所有视图的HTML（从RenderBy（）和所有包含的部分视图）。我一直在尝试在组件中使用

，以允许Razor视图的HTML在Vue div中传递和存在

BodyContent组件（尝试仅用于传递视图的HTML）：

我是否渲染这些组件不正确？

---

注意：使用带有NPM/Webpack/etc.和SFC组件的完整构建版本2.6.12-但如果这可以简化事情，则可以切换到运行时脚本加载方式。

我对Vue了解不多，但

$mount（“#MainVue”）

看起来它将使用

BodyContent

组件设置

div

的

innerHTML

<在服务器端创建的code>@RenderBody（）可能会被替换。为什么会有@RenderBody（），Vue会在其中渲染？嘿，确实是这样-装载的Vue会替换服务器端内容。@RenderBody（）存在，因此服务器端视图在Vue组件之间呈现。如果将@RenderBody（）移出Vue控制的div，则无法控制Vue生态系统中的视图html。感谢您的回复！通常情况下，情况正好相反。主体的动态内容将由Vue或其他框架控制，登录、会话、cookie和布局菜单由MVCI在服务器端创建。我正在集成到现有的MVC项目中，因此我尝试使用Vue包装来自视图的现有内容，以便我可以在任何地方插入Vue组件，并控制Vue中的所有内容。谢谢

<template>
    <div id="vueBody">
        <slot></slot>
    </div>
</template>

<template>
  <div id="myVue">
    <Header />
    <BodyContent>
      <slot></slot>
    </BodyContent>
    <Footer />
  </div>
</template>

    <div id="HeaderCont">
        <div id="VueHeader">
        </div>
        <div id="MainContent">
            <div id="MainVue">
                @RenderBody() <!-- Always disappears after Vue load -->
            </div>
        </div>
        <div id="FooterCont">
            <div id="VueFooter" />
        </div>
    </div>

var HeaderVue = new Vue({
    vuetify,
    store,
    render: h => h(Header)
}).$mount('#VueHeader')

var MainVue = new Vue({
    vuetify,
    store,
    render: h => h(BodyContent)
}).$mount('#MainVue')

var FooterVue = new Vue({
    vuetify,
    store,
    render: h => h(Footer)
}).$mount('#VueFooter')