I am currently utilizing vue router to facilitate navigation on my website. Within this setup, I have various pages such as a home page and an about us page. The issue I am facing pertains to some jQuery functionality that is implemented in a separate JS file specifically for the home page. Strangely enough, when I navigate to another page (like the about us page) and then return to the home page, the script ceases to work. This inconsistency also occurs when I visit any other page before returning to the home page. My suspicion is that this problem is related to the vue router configuration. Here is the snippet of the jQuery script in question:
$('.arrow_down').click(function() {
$('html, body').animate({
scrollTop: $('.ourservices').offset().top
}, 600);
});
Below is an outline of the Vue router structure being used in my project:
// Introducing some important 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'
})
// To initiate routing, you need a root component.
// In our scenario, we are opting for a simple approach
// using an empty component, since the app template is HTML-based.
// Please note that App isn't a Vue instance.
var App = Vue.extend({})
// Creating a new instance of the router.
// Additional options can be passed here if necessary,
// but simplicity is key for now.
var router = new VueRouter({
hashbang: false,
history: true,
linkActiveClass: "active"
})
// Defining the routes.
// Each route should correspond to a specific component. The "component" can
// either be a custom component established via Vue.extend(), or merely a set of component options.
// More details on nested routes will be clarified later on.
router.map({
'/': {
component: home
},
'/aboutus': {
component: aboutus
},
'/portfolio': {
component: portfolio
},
'/contact': {
component: contact
}
})
// Ready to launch the application!
// The router will instantiate App and mount it to
// the element matched by the selector #app.
router.start(App, '#app')
If you require further information, please don't hesitate to ask.