Question

我在这里寻找答案，而且已经提供的那些都没有为我工作。

我的项目很简单，一个带Vue的寻呼机来处理页面路由。我在每个不同的页面上都有一些基于jQuery的内容。当我第一次加载页面时，jQuery插件显示正常。但是当我导航到其他页面时，jQuery插件不会重新加载。我已经尝试了每一个钩子，我能想到...装载，之前的路由输入，之前的路由，更新等等，并且它们都不起作用。我尝试过使用此功能。$ nextTick（function（）{}也不起作用。

jQuery插件是光滑的轮播。是的我知道有一个正式的vue光滑包装，但我没有使用CLI ....我的项目只是通过CDN连接vue和vue路由器我不知道如何使用它如何使用它我的项目已设置（其示例适用于单个文件组件）。如果解决方案是hacky或不是最佳实践，我不在乎，我只需要让Vue在每个页面上加载光滑的初始化程序脚本。我看到了制作指令或组件的示例，但它们对我没有意义，因为他们假设您使用的是单个文件组件，而我不是。有没有办法做到这一点？

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

Answer 1

我尝试了您的演示并使用next修复了它（check updated pen here）。

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

问题是您在组件中的html元素完全建立之前尝试使用slick。相反，next被调用on the end of the navigation resolution flow。

Answer 2

您可以通过将脚本中的init函数暴露给window对象来使它变得更好：

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

window.slickInit = slickInit;

然后在您的mounted()钩中可以将其命名为：

window.slickInit()

或在beforeRouteEnter中：

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

Answer 3

如果其他人来这里是因为他们的jQuery代码仅在页面被硬加载时才可以与Vue配合使用（即，当页面通过路由器重定向加载时不起作用），您可以将jQuery代码移至{{ 1}}，它将起作用。

基本上，您需要等到页面准备好后才能运行jQuery代码。

如何在Vue路由器更改页面时加载Jquery插件/脚本？

3 个答案: