Vuejs2 多页应用程序上的Vue 2.0

我刚开始使用Vue时，偶然发现了一个关于多页面应用程序架构的问题，我在任何地方都找不到答案

我正在基于umbraco cms构建一个web应用程序，各个页面上的部分代码都是vue代码。在这两者之间，还有很多正常的cms输出，它们不是通过vue渲染的，例如：

          <div class="description">
            @Html.Raw(Model.Description)
        </div>
        <div class="specifications product-onpage-link">
            <a href="#description" class="first-link" onclick="event.preventDefault(); productScroll('#description')">Se varebeskrivelsen</a> <a href="#specifications" onclick="event.preventDefault(); productScroll('#specifications')">Se tekniske specifikationer</a>
        </div>

        @Html.Partial("~/Views/Partials/Webshop/Products/Variant.cshtml", Model)

        @{
            var amountvalues = Model.StockInfo != null && Model.StockInfo.AmountValues != null ? Json.Encode(Model.StockInfo.AmountValues) : "";
        }

        <div id="add-to-basket" class="variant box rounded-borders">
            <add-to-basket amountplaceholder="@Umbraco.GetDictionaryValue("Products: amount name")" id="@Model.ItemNo" orderminimum="@Model.StockInfo.OrderMinimum" amountvalues="@amountvalues" placeholder="@Umbraco.GetDictionaryValue("Products: Add to basket button name")" nicename="@Model.StockInfo.Stock.NiceName" delivery="@Model.StockInfo.DeliveryTime" orderinterval="@(Model.StockInfo.OrderInterval == 0 ? 1 : Model.StockInfo.OrderInterval)" />
        </div>
    </div>

在这里，我实际上生成了很多vue实例。我在想，一定有更简单的方法

我无法在一个vue应用程序中处理组件之间存在父/子关系的所有vue代码，因为它们分布在页面上，中间有大量由服务器呈现的常规html

我担心的是，当我创建几个vue实例时，会降低性能

---

希望您对如何构造代码有一些好的想法。

我很确定最好的方法是使用一个vue intance。如果关系不太复杂，可以通过道具处理；如果关系太复杂，可以使用vuex处理

---

尽管您没有单页应用程序，但除非您使用会话、本地存储或数据库，否则状态不会在页面之间共享。

我确信最好的方法是使用单vue维护。如果关系不太复杂，可以通过道具处理；如果关系太复杂，可以使用vuex处理

尽管由于您没有单页应用程序，除非您使用会话、本地存储或数据库，否则页面之间不会共享状态

import productComponent from './product-overview';
import BuyButton from './shared/buy-button';

Vue.component('buy-button', BuyButton);

new Vue({
    el: '#add-to-basket'
});

new Vue({
    el: '.buytogether'
});

...