vue路由加载组件时执行方法

在Vue.js中，你可以利用`beforeEach`导航守卫在每次路由切换之前执行自定义的方法。这是一个常用的场景，可以让你在组件加载前进行权限验证、数据获取或者页面状态更新等操作。

import Vue from 'vue'
import Router from 'vue-router'

// 创建一个全局导航守卫
router.beforeEach((to, from, next) => {
  // 这里是你的处理逻辑，例如：
  console.log('正在加载', to.name)

  // 当条件满足时调用next()继续加载组件，如果不满足则可以通过next(false)阻止跳转
  if (/* 权限检查或需要的数据已经准备好 */) {
    next()
  } else {
    next(false) // 阻止跳转并显示错误提示
  }
})

// 注册路由器
new Router({
  routes: [
    { path: '/', component: HomeComponent },
    { path: '/about', component: AboutComponent }
    // 更多路由...
  ]
})

在这个例子中，`HomeComponent`和`AboutComponent`会在对应的路由被访问时，在`beforeEach`函数执行完之后被加载。