Vue.js 多页应用程序VueJs

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

按此处所述设置多个网页条目：（）对我来说很有效，但我现在遇到的问题是身份验证问题，因为Vuex存储在重新加载/重定向时被删除

过去有没有人遇到过这个问题？

---

提前感谢

我构建了一个大规模的多页面VueJs应用程序，在多页面部分使用Ruby on Rails，并使用Sprinking 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>

这将在每个

.Vue容器

元素上创建并初始化一个Vue应用程序，一切正常

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

---

我写了一篇博客文章详细介绍了此设置：

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

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);
  }
});