Next.js中如何获取嵌套动态路由的父级动态参数？

下面针对主流前端框架，分别说明如何获取嵌套动态路由（如someurl.com/[slug]/[id]）中的slug参数：

Next.js #

App Router（Next.js 13+） #

• 页面组件可直接通过params参数解构出slug：

  // app/[slug]/[id]/page.js
  export default function Page({ params }) {
    const { slug, id } = params;
    return (
      <div>
        <p>Slug: {slug}</p>
        <p>ID: {id}</p>
      </div>
    );
  }
  

• 客户端组件中，可使用useParams钩子获取：

  'use client';
  import { useParams } from 'next/navigation';
  
  export default function Page() {
    const params = useParams();
    return (
      <div>
        <p>Slug: {params.slug}</p>
        <p>ID: {params.id}</p>
      </div>
    );
  }
  

Pages Router（Next.js 12及以下） #

• 客户端通过useRouter钩子的query对象获取：

  // pages/[slug]/[id].js
  import { useRouter } from 'next/router';
  
  export default function Page() {
    const router = useRouter();
    const { slug, id } = router.query;
    return (
      <div>
        <p>Slug: {slug}</p>
        <p>ID: {id}</p>
      </div>
    );
  }
  

• 服务端渲染场景（如getServerSideProps），从上下文对象中提取：

  export async function getServerSideProps(context) {
    const { slug, id } = context.params;
    return {
      props: { slug, id }
    };
  }
  

Vue Router #

Vue 3 + Vue Router 4 #

在组件中使用useRoute钩子获取params对象：

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

<template>
  <div>
    <p>Slug: {{ slug }}</p>
    <p>ID: {{ id }}</p>
  </div>
</template>

Vue 2 + Vue Router 3 #

通过组件实例的$route.params获取：

<script>
export default {
  mounted() {
    const { slug, id } = this.$route.params;
    console.log('Slug:', slug);
  }
}
</script>

React Router（v6+） #

使用useParams钩子直接解构出slug和id：

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

function DetailPage() {
  const { slug, id } = useParams();
  return (
    <div>
      <p>Slug: {slug}</p>
      <p>ID: {id}</p>
    </div>
  );
}

对应的路由配置需匹配动态参数：

import { Routes, Route } from 'react-router-dom';
import DetailPage from './DetailPage';

function App() {
  return (
    <Routes>
      <Route path="/:slug/:id" element={<DetailPage />} />
    </Routes>
  );
}

内容的提问来源于stack exchange，提问作者Mohammed Bekele