How to Properly Use Vue Router beforeRouteEnter or Watch to trigger method in Single File Component?

Question

I\'m working on an app in Vue.js using Single File Components and Vue Router. I have a Search component where I need to execute a method to re-populate search results each time

Answer 1

Since you want to re-populate search results each time a user visits the route.

You can use beforeRouteEnter() in your component as below:

beforeRouteEnter (to, from, next) { 
  next(vm => { 
    // access to component's instance using `vm` .
    // this is done because this navigation guard is called before the component is created.            
    // clear your previously populated search results.            
    // re-populate search results
    vm.initializeSearch();
    next();
  }) 
} 

You can read more about navigation guards here

Here is the working fiddle