使用Vue路由器在来回切换链接时禁用jquery

使用Vue路由器在来回切换链接时禁用jquery,jquery,vue.js,Jquery,Vue.js,我正在使用vue路由器进行导航。我有多个页面,包括主页和关于我们的页面。我在另一个JS文件中为我的主页编写了一些jquery,效果非常好,但是当我单击我的about us页面,然后返回我的主页时,脚本停止工作。这也适用于当我转到另一个页面,然后再回到我的主页时。我有一种感觉,这是由于我的vue路由器。jquery脚本如下所示: $('.arrow_down').click(function() { $('html, body').animate({ scrollTop:

我正在使用vue路由器进行导航。我有多个页面,包括主页和关于我们的页面。我在另一个JS文件中为我的主页编写了一些jquery,效果非常好,但是当我单击我的about us页面,然后返回我的主页时,脚本停止工作。这也适用于当我转到另一个页面,然后再回到我的主页时。我有一种感觉,这是由于我的vue路由器。jquery脚本如下所示:

$('.arrow_down').click(function() {
    $('html, body').animate({
        scrollTop: $('.ourservices').offset().top
    }, 600);
});
我的vue路由器看起来像:

// Define some components
var home = Vue.extend({
    template: '#home-template'
})

var aboutus = Vue.extend({
    template: '#aboutus-template'
})

var portfolio = Vue.extend({
    template: '#portfolio-template'
})

var contact = Vue.extend({
    template: '#contact-template'
})

// The router needs a root component to render.
// For demo purposes, we will just use an empty one
// because we are using the HTML as the app template.
// !! Note that the App is not a Vue instance.
var App = Vue.extend({})

// Create a router instance.
// You can pass in additional options here, but let's
// keep it simple for now.
var router = new VueRouter({
    hashbang: false,
    history: true,
    linkActiveClass: "active"
})

// Define some routes.
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// Vue.extend(), or just a component options object.
// We'll talk about nested routes later.
router.map({
    '/': {
        component: home
    },
    '/aboutus': {
        component: aboutus
    },
    '/portfolio': {
        component: portfolio
    },
    '/contact': {
        component: contact
    }
})

// Now we can start the app!
// The router will create an instance of App and mount to
// the element matching the selector #app.
router.start(App, '#app')

请随时询问其他信息。

您可以将脚本包含在组件就绪功能中:

var home = Vue.extend({
  template: '#home-template',
  ready: function () {
    $('.arrow_down').click(function() {
      $('html, body').animate({
        scrollTop: $('.ourservices').offset().top
      }, 600);
    }); 
  } 
}) 
参考提琴样品


另请参阅Vue实例生命周期

如何包含jQuery以及这些脚本的顺序?另外,您可以给vue路由器提供一个包含jQuery的组件,而不是使用demo var应用程序,在该应用程序中扩展一个空对象。顺便说一下,有控制台输出吗?我的jQuery在Vue脚本之前。没有控制台输出或错误消息。是否可以给我一个示例,说明如何在组件中容纳jQuery?