Next.js 跳转传参并接收接参

介绍路由传参，接参使用方法

1. 传参 + 跳转页面接收参数

// Link
import Link from 'next/link';
跳转

// router
import { useRouter } from 'next/router';
const router = useRouter();
router.push('/first?name=张思学&age=18&work=前端开发');

// 页面接收参数
import { useRouter } from 'next/router';
const router = useRouter();
const { name, age, work }: any = router.query;
console.log(name, age, work);

2. 动态路由传参 + 跳转页面接收参数
   创建动态路由在pages文件夹下创建details文件夹里面创建动态接收参数页面[id].tsx

// Link as内是参数
import Link from 'next/link';
跳转

// router
import { useRouter } from 'next/router';
const router = useRouter();
router.push('/details/[id]', '/details/1');

// details接收参数ID
import { useRouter } from 'next/router';
export default function details() {
  const router = useRouter();
  const { id }: any = router.query;
  console.log(id);
}

3. 动态路由多参数传递 + 接收参数
   创建动态路由在pages文件夹内创建post文件夹里面创建动态接收参数页面[...slug].tsx

//  Link  as内是参数 Link 

  动态传参多参数


// router
import { useRouter } from 'next/router';
const router = useRouter();
router.push('/post/[...slug]', '/post/SX/18/IT');

// post 接收参数ID
import { useRouter } from 'next/router';
const router = useRouter();
const { slug } = router.query;
console.log(slug);