如何在单文件组件中正确使用 Vue Router beforeRouteEnter 或 Watch 触发方法？

Posted 2023-02-23

【中文标题】如何在单文件组件中正确使用 Vue Router beforeRouteEnter 或 Watch 触发方法？

【英文标题】：How to Properly Use Vue Router beforeRouteEnter or Watch to trigger method in Single File Component?

【发布时间】：2017-10-17 21:55:38

【问题描述】：

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

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

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

路由在 index.js 中设置如下：

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
)

我认为我应该使用“watch”或“beforeRouteEnter”，但我似乎都无法工作。

我尝试在我的搜索组件中像这样使用“watch”：

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

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

对此的任何帮助将不胜感激。

【问题讨论】：

您是否使用 为您的 缓存路由

【参考方案1】：

因为您想在每次用户访问该路线时重新填充搜索结果。

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

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

你可以阅读更多关于导航守卫here

这里是working fiddle

【讨论】：

@hipertracker 在我的回答中添加了一个示例。看看吧。

如何在 TypeScript 类中实现这一点？我目前在做@Component( beforeRouteEnter(to, from, next) this.beforeRouteEnter(to, from, next); ，但这不是很干净，对吧？

我可以知道如果我们想在评估vm.checkPolicy()之后去特定的路由器，例如，在next回调中？