使用Vue路由器在来回切换链接时禁用jquery
我正在使用vue路由器进行导航。我有多个页面,包括主页和关于我们的页面。我在另一个JS文件中为我的主页编写了一些jquery,效果非常好,但是当我单击我的about us页面,然后返回我的主页时,脚本停止工作。这也适用于当我转到另一个页面,然后再回到我的主页时。我有一种感觉,这是由于我的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:
$('.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?