다중 페이지 애플리케이션 VueJs

다중 페이지 애플리케이션 VueJs

안녕!
나는 현재 대규모 VueJs 애플리케이션을 만들고 있으며, 멀티페이지 애플리케이션으로 설정하고 싶다. 여기에는 독립적으로 로드하고 싶은 두 개의 섹션(Admin + User)이 있지만 일부 구성 요소와 서비스를 공유하고 싶다.내가 어떻게 이런 종류의 건축물을 만들 수 있을까? 어떤 도움이라도 고마워할 것이다.

여기에 설명된 대로 여러 웹 팩 항목 설정: (https://github.com/Plortinus/vue-multiple-pages)은 나에게 효과가 있지만, 지금 발생하는 문제는 Vuex Store가 다시 로드/호스트 시 삭제되기 때문에 인증이다.

과거에 이 문제를 발견한 사람이 있는가?감사 인사 어드밴스

Ruby on Rails for Multipage party를 사용하여 사물을 상호작용하게 하기 위해 Vue를 뿌리는 대규모 Multipage VueJs 애플리케이션을 구축했다.

당신이 할 수 있는 것은 페이지의 특정 부분에 있는 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 앱이 생성되고 초기화됨.vue-container원소만 있으면 모든 것이 잘 된다!

여러 구성 요소 간에 데이터를 공유해야 하는 경우 이벤트 버스나 Vuex와 같은 표준 데이터 공유 기술이 제대로 작동될 것이다.

나는 이 설정을 상세히 기술한 블로그 포스트를 썼다: https://blog.koley.in/2018/vue-components-in-multi-page-apps

참조URL: https://stackoverflow.com/questions/45820370/multipage-application-vuejs