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

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


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();  }) } 

You can read more about navigation guards here

Here is the working fiddle