面试题：Vue Router重定向功能在复杂嵌套路由中的应用

Question

假设存在多层嵌套路由，例如/user/:userId/profile/edit，要求当用户访问/user/:userId/profile时重定向到/user/:userId/profile/edit，且要考虑重定向时携带参数的情况，说明如何在Vue Router中进行配置实现。

Answer 1

在Vue Router的配置中，可以通过redirect属性来实现重定向。对于多层嵌套路由，配置如下：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId/profile',
      redirect: (to) => {
        // 考虑携带参数，将原参数合并到重定向的路径中
        const { params, query } = to;
        return {
          path: `/user/${params.userId}/profile/edit`,
          query
        };
      }
    },
    {
      path: '/user/:userId/profile/edit',
      component: () => import('@/views/UserProfileEdit.vue')
    }
  ]
});

上述代码中，当访问/user/:userId/profile时，会通过redirect函数重定向到/user/:userId/profile/edit，并保留原路径中的查询参数query。如果有其他参数需要处理，也可以在redirect函数中进行相应操作。这样就实现了多层嵌套路由下的重定向并携带参数。