NextJS App Router：如何获取完整的查询参数字符串？

以下是几种常见场景下的实现方式：

浏览器原生环境 #

直接利用window.location对象获取查询部分，再去除开头的?：

const queryString = window.location.search.slice(1);
// 输出：param1=lorem&param2=ipsum&param3=dolor&param4=sit

如果是处理任意URL字符串（非当前页面URL），可以用URL API：

const url = new URL('/pathname?param1=lorem&param2=ipsum&param3=dolor&param4=sit', window.location.origin);
const queryString = url.search.slice(1);

React/Next.js 组件中 #

方法1：客户端渲染直接用window.location #

需在组件挂载后执行（比如通过useEffect）：

import { useEffect, useState } from 'react';

function MyComponent() {
  const [queryString, setQueryString] = useState('');

  useEffect(() => {
    setQueryString(window.location.search.slice(1));
  }, []);

  return <div>{queryString}</div>;
}

方法2：Next.js 13+ App Router 专用 #

用useSearchParams钩子直接获取并转为字符串：

'use client';
import { useSearchParams } from 'next/navigation';

function MyComponent() {
  const searchParams = useSearchParams();
  const queryString = searchParams.toString();
  // 输出：param1=lorem&param2=ipsum&param3=dolor&param4=sit

  return <div>{queryString}</div>;
}

Vue 组件中（Vue3 + Vue Router） #

用useRoute获取路由查询对象，再通过URLSearchParams转为字符串：

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const queryString = new URLSearchParams(route.query).toString();
    // 输出：param1=lorem&param2=ipsum&param3=dolor&param4=sit

    return { queryString };
  }
};

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