多页应用程序 VueJs答案

【问题标题】：Multipage Application VueJs多页应用程序 VueJs
【发布时间】：2017-08-22 14:26:35
【问题描述】：

嗨！
我目前正在构建一个大型 VueJs 应用程序，并希望将其设置为多页应用程序，其中我有两个不同的部分（管理员 + 用户），我想独立加载，但共享一些组件和服务。我将如何构建这种架构，任何帮助将不胜感激。

按照此处所述设置多个 Webpack 条目：(https://github.com/Plortinus/vue-multiple-pages) 对我有用，但我现在遇到的问题是 身份验证，因为 Vuex 商店在重新加载/重定向时被删除。

过去有没有人遇到过这个问题？提前致谢

【问题讨论】：

您应该将状态存储在 localStorage 中：已经有 VueX 插件可以为您执行此操作，以确保导航期间状态的持久性。
正如 Terry 所说，您需要将 Vue 应用相关的数据（状态）存储在客户端。如果问题仍然以某种方式相关，我建议您使用vuex-persistedstate。

标签： vue.js vuejs2

【解决方案1】：

我使用 Ruby on Rails 为 Multipage 部分构建了一个大型的 Multipage VueJs 应用程序，并使用 vue 来实现交互。

你可以做的是在页面的某些部分初始化一个 Vue 应用程序，方法是将它们包装在一个容器中，然后对所有需要 Vue 组件的页面执行相同的操作。

我是这样做的，我有一个名为 vue-container 的容器类，它像这样包装我的组件调用：

<div class="vue-container">
  <floating-menu></floating-menu>
  <show-pdf :resource="<%= @resource.as_json(current_user: current_user) %>"></show-pdf>
</div>

这里 floating-menu 和 show-pdf 是两个 Vue 组件。

然后，在为所有页面导入的 app.js 文件中，我有以下代码：

if(window.vueapp == null){
  window.vueapp = []
}
if(window.vueapp != null){
  for(var i=0, len=vueapp.length; i < len; i++){
    vueapp[i].$destroy();
  }
  window.vueapp = []
}
var myNodeList = document.querySelectorAll('.vue-container');
forEach(myNodeList, function (index, element) {
  if (element != null) {
    var vueapp = new Vue({
      el: element,
      store,
      components: {
        ShowPdf, FloatingMenu
      }
    })
    window.vueapp.push(vueapp);
  }
});

这会在每个 .vue-container 元素上创建并初始化一个 Vue 应用程序，一切正常！

如果您需要在不同组件之间共享数据，任何标准数据共享技术（如 Event Bus 或 Vuex）都可以正常工作。

我写了一篇博文详细介绍了这个设置：https://blog.koley.in/2018/vue-components-in-multi-page-apps

【讨论】：