web-dev-qa-db-fra.com

Comment utiliser correctement Vue Router beforeRouteEnter ou Watch pour déclencher la méthode dans le composant de fichier unique?

Je travaille sur une application dans Vue.js en utilisant des composants à fichier unique et un routeur Vue. J'ai un composant de recherche dans lequel j'ai besoin d'exécuter une méthode pour repeupler les résultats de recherche chaque fois qu'un utilisateur visite la route. La méthode s'exécute correctement la première fois que la route est visitée à cause du hook "create":

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

Cependant, lorsque l'utilisateur quitte l'itinéraire (pour s'inscrire ou se connecter à l'application par exemple) et revient sur la page de recherche, je n'arrive pas à trouver un moyen de déclencher automatiquement this.initializeSearch () lors des visites suivantes.

Les routes sont configurées dans index.js comme suit:

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

Je suppose que je devrais utiliser "watch" ou "beforeRouteEnter" mais je n'arrive pas à faire fonctionner les deux.

J'ai essayé d'utiliser "watch" comme ça dans mon composant de recherche:

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

Et je n'arrive pas à trouver de documentation expliquant comment utiliser correctement le rappel beforeRouteEnter avec un composant de fichier unique (la documentation de vue-router n'est pas très claire).

Toute aide à ce sujet serait très appréciée.

vue.jscomponentswatchvue-router
8
Adam Sweeney

Puisque vous souhaitez recopier les résultats de la recherche à chaque fois qu'un utilisateur visite l'itinéraire.

Vous pouvez utiliser beforeRouteEnter() dans votre composant comme ci-dessous:

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

Vous pouvez en savoir plus sur les gardes de navigation ici

Voici le violon de travail

10
Vamsi Krishna