如何在单文件组件中正确使用 Vue Router beforeRouteEnter 或 Watch 触发方法? [英] How to Properly Use Vue Router beforeRouteEnter or Watch to trigger method in Single File Component?

问题描述

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.

解决方案

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

这篇关于如何在单文件组件中正确使用 Vue Router beforeRouteEnter 或 Watch 触发方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！