Отображение Vue представлений в элементе DOM вне монтирования приложения Vue - PullRequest
Новая
       4

Отображение Vue представлений в элементе DOM вне монтирования приложения Vue

0 голосов
/ 02 марта 2020

Допустим, у меня есть унаследованное приложение, которое использует старую оболочку внешнего интерфейса, которая разделяет страницу на два элемента div, первый - меню, а второй - панель, которая отображает представления на основе того, что было выбрано в первом элементе div. Примерно так: 

<div class="menu">
   <a href="#/legacyroute1">r1</a>
   <a href="#/legacyroute2">r2</a>
   //other code
</div>
<div class="panel">
//Views rendered by clicking choices in the first div
</div>

В меню есть другие элементы с пользовательским синтаксисом руля, который мешает правильной обработке Vue, которую использует другая среда интерфейса. Я хочу, чтобы и мое приложение Vue, и моя устаревшая инфраструктура работали одновременно на одной и той же странице, но примеры, которые я вижу для Vue и Vue -Router, имеют внутри элемента, к которому монтируется приложение Vue. Мне было интересно, можно ли сделать так, чтобы маршрутизатор отображал другой элемент вне элемента, к которому подключено приложение vue. Нечто похожее на это: 

<div class="menu">
   <a href="#/legacyroute1">r1</a>
   <a href="#/legacyroute2">r2</a>
   //other code

   <div class="vue-app-mount"> //This is where I want to mount my vue app
      <router-link to="#/vueroute1">newroute</router-link>
   </div>
</div>
<div class="panel">
//Views rendered by clicking choices in the first div

   </router-view> //This exists outside of the vue app mount element, but is where vue can still render
</div>

Возможно ли это? Как выглядит JS, чтобы заставить это работать, если это возможно?

Я пытался найти похожие примеры, но не могу найти ничего, имеющего отношение к тому, что я пытаюсь сделать. Я довольно близок к тому, чтобы сдаться и использовать устаревший маршрутизатор для этих вещей.

...