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

Viewed 39464

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 a user visits the route. The method executes correctly the first time the route is visited because of the "create" hook:

created: function() {
    this.initializeSearch();
  },

However, when the user leaves the route (to register or log into the app for instance), and returns to the Search page, I can't seem to find a way to automatically trigger this.initializeSearch() on subsequent visits.

Routes are set up in index.js like so:

import Search from './components/Search.vue';
import Login from './components/Login.vue';
import Register from './components/Register.vue';

// Vue Router Setup
Vue.use(VueRouter)

const routes = [
  { path: '/', component: Search },
  { path: '/register', component: Register },
  { path: '/login', component: Login },
  { path: '*', redirect: '/' }
]

export const router = new VueRouter({
  routes
})

I gather that I should be using "watch" or "beforeRouteEnter" but I can't seem to get either to work.

I tried using "watch" like so within my Search component:

watch: {
    // Call the method again if the route changes
    '$route': 'initializeSearch'
  }

And I can't seem to find any documentation explaining how to properly use the beforeRouteEnter callback with a single file component (the vue-router documentation isn't very clear).

Any help on this would be much appreciated.

1 Answers
Related