面试题：Vue Router嵌套路由下如何实现动态路由匹配及参数传递

Question

在一个嵌套路由场景中，父路由为'/users'，子路由为'/users/:userId'，':userId'是动态参数，表示用户ID。当访问'/users/123'时，需要在子组件中获取这个'123'参数并显示在页面上。同时，子路由下又有二级子路由'/users/:userId/posts/:postId'，同样需要获取动态参数':postId'。请详细说明如何实现这样的动态路由匹配及参数传递，包括路由配置和组件中获取参数的方法。

Answer 1

1. 路由配置

假设使用 React Router（以 v6 为例），配置如下：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Users from './Users';
import User from './User';
import UserPosts from './UserPosts';

const router = createBrowserRouter([
  {
    path: '/users',
    element: <Users />,
    children: [
      {
        path: ':userId',
        element: <User />
      },
      {
        path: ':userId/posts/:postId',
        element: <UserPosts />
      }
    ]
  }
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

2. 组件中获取参数的方法

User 组件获取 userId

import { useParams } from 'react-router-dom';

function User() {
  const { userId } = useParams();
  return <div>用户ID: {userId}</div>;
}

export default User;

UserPosts 组件获取 userId 和 postId

import { useParams } from 'react-router-dom';

function UserPosts() {
  const { userId, postId } = useParams();
  return (
    <div>
      用户ID: {userId}, 文章ID: {postId}
    </div>
  );
}

export default UserPosts;

如果是使用 Vue Router（以 Vue3 为例）：

1. 路由配置

import { createRouter, createWebHistory } from 'vue-router';
import Users from './components/Users.vue';
import User from './components/User.vue';
import UserPosts from './components/UserPosts.vue';

const routes = [
  {
    path: '/users',
    component: Users,
    children: [
      {
        path: ':userId',
        component: User
      },
      {
        path: ':userId/posts/:postId',
        component: UserPosts
      }
    ]
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

2. 组件中获取参数的方法

User 组件获取 userId

<template>
  <div>用户ID: {{ $route.params.userId }}</div>
</template>

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
</script>

UserPosts 组件获取 userId 和 postId

<template>
  <div>
    用户ID: {{ $route.params.userId }}, 文章ID: {{ $route.params.postId }}
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
</script>