大家好，欢迎来到IT知识分享网。

页面跳转

Link跳转

• href 添加跳转路径（默认是history的push模式，像历史记录里面添加一条）

  • 可以是字符串：”/about?abc=123″
  • 可以是对象：{pathname:”/about”,query:{name:“123”}}

• as 重命名 （跳转重命名的页面如果不存在刷新页面后会404，常用到动态路由跳转中）

  <Link href="news/[id]" as={ 
       `/list/${ 
         参数}`}
  

• replace （替换history状态）

• scroll (跳转后是否到页面顶部，默认为false)

• passHref （强制Link将href传递给子项，默认为false）

js编程跳转

• useRouter React Hook形式
  • router.push(’/about?abc=123’)
  • Router.push({pathname:”/about”,query:{name:“123”}})
• Router 直接获取到Router
• WithRouter 类组件使用

动态路由

在pages文件夹下创建的[id].js就是动态路由

例如：pages/news/[id].js 当访问 /news/123，news/456都是访问同一个组件。

如果有多级参数，就可以使用[…id].js , 比如：news/123/456/789，id接收到的参数就是一个数组[‘123’,’456,’789]

页面接收参数

​ 对应的三种方法

• router.query