在Vue3中如何处理路由的后置钩子（afterEach）？

在 Vue 3 中，可以使用 router 实例的 afterEach 方法来设置后置钩子。以下是一个示例：
 
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 你的路由配置
  ],
});

router.afterEach((to, from) => {
  // 在这里处理后置钩子逻辑
  console.log('路由切换完成', to, from);
});

export default router;
 
在上述示例中，使用 router.afterEach 注册了一个后置钩子函数，该函数在每次路由切换完成后被调用，接收目标路由 to 和源路由 from 作为参数，可以在这个函数中执行一些通用的逻辑，比如记录路由切换、设置页面标题等操作。

在 Vue 3 中，在路由的后置钩子函数中可以通过传入的参数来获取路由参数。

 

假设你的路由配置中有带参数的路由，如下：

const routes = [

  {

    path: '/user/:id',

    name: 'User',

    component: UserComponent,

  },

];

在后置钩子函数中可以这样获取路由参数：

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({

  history: createWebHistory(),

  routes: [

    // 你的路由配置

  ],

});

router.afterEach((to, from) => {

  if (to.params.id) {

    console.log('当前路由参数 id：', to.params.id);

  }

});

export default router;

在后置钩子函数中， to 参数代表目标路由，通过 to.params 可以获取目标路由上的参数。