Vue 3 в .NET 8 MPA — проблемы с Razor и рендерингом Vue ⇐ C#

[Anonymous]

Я уже несколько дней безуспешно пытаюсь решить проблему, и мне нужна ваша помощь. Моя цель — настроить многостраничное приложение (MPA) с использованием Vue 3 в классическом приложении .NET 8. Файлы Razor используются для доставки контента в приложение Vue 3, и мне необходимо сохранить этот технологический стек нетронутым.
Текущая настройка

• Макет по умолчанию в Vue:

Я использую компонент макета по умолчанию в Vue, который отображается в основном компоненте приложения.Макет по умолчанию в Vue:

Я использую компонент макета по умолчанию в Vue, который отображается в основном компоненте приложения. р>

Код: Выделить всё

import ....

• Layout.cshtml:

Основной файл макета. правильно отображает приложение Vue.

Код: Выделить всё

@ViewData["Title"]
[*]



@RenderBody()

• Страница Razor:

Для конкретной конечной точки Я хочу визуализировать файл Razor, содержащий следующую разметку:

Код: Выделить всё

@model SomeProject.Models.SomeViewModel
@{
ViewData["Title"] = "Pin";
}

hello world
@ViewData["Title"]

на самом деле не имеет значения, поскольку даже h1 и p не отображаются.

• Main.ts

Это просто рендеринг приложения

Код: Выделить всё

  public mountVueApp() {
this.app.mount('#app')
}

Проблема
ViewData["Title"] = "Pin"; работает правильно, указывая, что страница отображается. Однако Vue 3 переопределяет шаблоны Razor, и остальная часть содержимого (абзац, заголовок и компонент) не отображается. Похоже, что после применения макета по умолчанию в DOM больше ничего не остается.
Вопрос
Как я могу запретить Vue 3 переопределять мои шаблоны Razor и гарантировать, что как контент, отображаемый на сервере, так и компоненты Vue отображаются правильно? Мы приветствуем любые идеи и предложения!
Спасибо за помощь!

Подробнее здесь: https://stackoverflow.com/questions/786 ... -rendering