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

Posted 2023-02-22

【中文标题】Vue路由器更改页面时如何加载Jquery插件/脚本？

【英文标题】：How to load Jquery plugin/script when Vue router changes page?

【发布时间】：2018-04-07 05:31:03

【问题描述】：

我在这里四处寻找答案，但已经提供的答案都不适合我。

这是一个工作演示 codepen.io/figaro/pen/mBvWJa

我的项目很简单，一个带有 Vue 的单页器来处理页面路由。我在每个不同的页面上有一些基于 jQuery 的内容。当我第一次加载页面时，jQuery 插件显示正常。但是当我导航到其他页面时，jQuery 插件不会重新加载。我已经尝试了所有我能想到的钩子......安装，beforeRouteEnter，beforeRouteLeave，更新等，但它们都不起作用。我试过用 this.$nextTick(function () 也不管用。

jQuery 插件是流畅的轮播。是的，我知道有一个官方的 vue slick 包装器，但我没有使用 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

【问题讨论】：

能否提供一个缩小的工作示例？

是的，我可以，谢谢你的提问。这是一个精简版的链接 -> codepen.io/figaro/pen/mBvWJa 请注意，当您更改路线时，滑块代码不会重新初始化。

【参考方案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。

【讨论】：

谢谢一百万，我真的很感激。当我查看文档时，我知道我遗漏了一些东西。

【参考方案2】：

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

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


window.slickInit = slickInit;

然后在你的 mounted() 钩子中你可以调用它：

window.slickInit()

或者在beforeRouteEnter：

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

【参考方案3】：

如果其他人来到这里是因为他们的 jQuery 代码仅在页面被硬加载时才能与 Vue 一起工作（即当页面通过路由器重定向加载时不起作用），你可以将你的 jQuery 代码移动到 @987654321 @ 它将起作用。

基本上你需要等到页面准备好后再运行 jQuery 代码。