vue路由切换加载组件收执行方法

在Vue.js中，当你通过路由切换加载新的组件时，你可以关联一些生命周期钩子方法来处理组件的加载、显示以及卸载过程。以下是一些关键的生命周期钩子，它们可以在路由切换时执行：

1. **beforeRouteEnter** (父组件): 这个钩子在匹配的组件实例被创建之前被调用，但是组件的实际DOM元素还没有插入到DOM中。在这个阶段，可以设置一些初始数据或者计算属性。

router.beforeEach((to, from, next) => {
  // 在这里执行方法...
})

2. **created**: 组件实例已经被创建，并挂载到了DOM上，但是所有的依赖项都还没有解析完毕。这是初始化数据的好时机。

3. **mounted**: 该钩子在组件的实际DOM元素已被插入到文档中之后并且CSS动画也完成时调用。这时，你可以开始执行那些需要DOM访问的操作。

4. **beforeRouteUpdate**: 当组件已存在于DOM中，只是其数据发生变化时会被调用。这个阶段通常用于更新状态或重新渲染视图。

5. **beforeDestroy**: 全局路由销毁之前，组件将会被移除。在这里可以清理资源或做其他必要的清理工作。

6. **destroyed**: 当组件实例完全从DOM中卸载时调用，此时不可再访问DOM或修改数据。

每个钩子都有对应的`next()`函数来继续路由流程，例如在`beforeRouteEnter`里完成操作后，可以用`next()`来跳转到目标组件。