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

问题描述

我正在使用Single File Components和Vue Router在Vue.js中开发一个应用程序。我有一个搜索组件，每次用户访问该路线时，我都需要执行一种方法来重新填充搜索结果。由于创建钩子，第一次访问路线时该方法正确执行：

  created：function（）{
 this.initializeSearch（）; 
}，
  

但是，当用户离开路线时（注册或登录例如，应用程序），然后返回到搜索页面，我似乎找不到一种在随后的访问中自动触发this.initializeSearch（）的方法。

像这样在index.js中进行设置：

  import从'./components/Search.vue'中搜索； 
 import从 ./components/Login.vue登录； 
 import从 ./components/Register.vue注册； 
 
 // Vue路由器设置
 Vue.use（VueRouter）
 
 const路由= [
 {路径： /，组件：搜索} ，
 {路径：'/ register'，组件：Register}，
 {路径：'/ login'，组件：Login}，
 {路径：'*'，重定向：'/ '} 
] 
 
 export const router = new VueRouter（{
 routes 
}）
  

我收集到应该使用 watch或 beforeRouteEnter，但似乎都无法正常工作。

我尝试在搜索组件中使用手表，例如：

 手表：{
 //如果路线更改
'$ route'：'initializeSearch'
} 
  

$ b $，请再次调用该方法b

而且我似乎找不到任何文档来解释如何正确地使用单个文件组件使用beforeRouteEnter回调（vue-router文档不是很清楚）。

对此将提供任何帮助。

解决方案

因为您希望每次用户访问路线时都重新填充搜索结果。

您可以使用 beforeRouteEnter（）在您的组件中，如下所示：

  beforeRouteEnter（到，从，下一个）{
 next （vm => {
 //使用`vm`访问组件的实例。 
 //这样做是因为在创建组件之前调用了此导航防护。 
 //清除以前填充的搜索结果。 
 //重新填充搜索结果
 vm.initializeSearch（）; 
 next（）; 
}）
} 
  

您可以阅读有关导航卫士的更多信息此处

这里是工作小提琴

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

You can read more about navigation guards here

Here is the working fiddle

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