Vue 라우터가 페이지를 변경할 때 Jquery 플러그인/스크립트를 로드하는 방법

Vue 라우터가 페이지를 변경할 때 Jquery 플러그인/스크립트를 로드하는 방법

답을 찾기 위해 이곳저곳을 찾아봤지만, 이미 제공된 답변 중 어느 것도 효과가 없습니다.

여기 작업 데모 codepen.io/figaro/pen/mBvWJa가 있습니다.

제 프로젝트는 심플합니다.Vue를 사용하여 페이지 라우팅을 처리할 수 있는1개의 호출기입니다.각 페이지에 jQuery 기반의 콘텐츠가 있습니다.처음 페이지를 로드하면 jQuery 플러그인이 정상적으로 표시됩니다.그러나 다른 페이지로 이동해도 jQuery 플러그인이 새로고침되지 않습니다.내가 생각할 수 있는 훅 이후로 모든 시도를 해봤는데...마운트, RouteEnter, BeforeRouteLeave, updated 등 모두 동작하지 않습니다.이거 써봤어요.$nextTick(function) {}도 동작하지 않습니다.

jQuery 플러그인은 slick carusel입니다.네, 공식 vue slick wrapper가 있는 것은 알지만 CLI는 사용하지 않습니다.프로젝트에는 CDN을 통해 vue 및 vue 라우터가 연결되어 있을 뿐이며 프로젝트 셋업 방법(예를 들어 단일 파일 컴포넌트용)을 사용할 수 없습니다.솔루션이 해킹인지 베스트 프랙티스인지에 관계없이 Vue에게 각 페이지에 slick initializer 스크립트를 로드하도록 하면 됩니다.지시문이나 컴포넌트를 작성하는 예를 보았습니다만, 1개의 파일 컴포넌트를 사용하고 있다고 상정하고 있기 때문에 납득이 가지 않습니다.어떻게 할 수 있을까요?

main.js 

  const NotFoundPage = {
  name: "NotFoundPage",
  template: "#404-template"
};

const routes = [
  { path: "/", component: Industry },
  { path: "/about", component: My Page },
  { path: "/contact", component: About},
  { path: "*", component: NotFoundPage }
];

const router = new VueRouter({
  routes
});

new Vue({
  router,
  template: "#root-template",
  mounted: function() {
    this.$nextTick(function () {
    })
  },
  beforeRouteUpdate ( to, from , next ) {
    this.$nextTick(function () {
    })
  },
  ready: function() {
    this.$nextTick(function () {
    })
  },
  updated () {
  }
}).$mount("#app");

html

<div id="app"></div>

 <template id="root-template">
 ...stuff

<view-router></view-router>

</template>

 <template id="industry"></template> etc

jquery 스크립트

$('.gallery-responsive').slick({
  infinite: true,
  speed: 300,
  slidesToShow: 3,
  draggable: true,
  edgeFriction: 0.30,
  slidesToScroll: 1,
  responsive: [{
    breakpoint: 1100,
    settings: {
          slidesToShow: 2,
          slidesToScroll: 1
    }
}, {
    breakpoint: 900,
    settings: {
          slidesToShow: 2,
          slidesToScroll: 1
    }
}, {
    breakpoint: 800,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1,
      dots: false,
      arrows: false,
    }
}
]

});

여기 작업 데모 codepen.io/figaro/pen/mBvWJa가 있습니다.

데모를 사용해 보고 수정했습니다(여기에서 업데이트된 펜 확인).next.

beforeRouteEnter(to, from, next) {
  next(vm => {
    $(".single-item").slick({
      dots: true
    });
  })
}

문제는 컴포넌트의 html 요소가 완전히 확립되기 전에 slick을 사용하려고 했다는 것입니다.그에 반해서,next는 네비게이션 해결 흐름의 마지막에 호출됩니다.

스크립트의 init 함수를 에 공개하면, 한층 더 향상할 수 있습니다.window오브젝트:

function slickInit() {
  $('.gallery-responsive').slick({});
}

window.slickInit = slickInit;

그럼 네 안에mounted()후크라고 부를 수 있습니다.

window.slickInit()

또는 BeforeRouteEnter:

beforeRouteEnter(to, from, next) {
  next(() => {
    window.slickInit()
  })
}

jQuery 코드가 페이지가 하드로드될 때만(라우터 리다이렉트를 통해 페이지가 로드될 때 작동하지 않음) Vue에서만 작동하기 때문에 다른 사용자가 여기에 온 경우 jQuery 코드를 로 이동할 수 있습니다.mounted()효과가 있을 거야

기본적으로 jQuery 코드를 실행하기 전에 페이지가 준비될 때까지 기다려야 합니다.

언급URL : https://stackoverflow.com/questions/46944050/how-to-load-jquery-plugin-script-when-vue-router-changes-page