1.两种路由跳转方式

1.1Link标签跳转

不支持兄弟标签并列的情况,需要嵌套一个父标签,下面的a标签。

  1. //pages/index.js
  2. import React from 'react'
  3. import Link from 'next/link'
  4. export default ()=>{
  5. return (
  6.  <>
  7.   <div><Link href="/about"><a>去about页面</a></Link></div>
  8.     <div><Link href="/mine"><a>去mine页面</a></Link></div>
  9.  </>
  11. )
  12. }
  1. //pages/about.js
  2. import Link from 'next/link'
  3. export default ()=>{
  4.     return (
  5.   <>
  6.           <div>这是about页面</div>
  7.       <div><Link href="/">回退 </Link></div>
  8.   </>
  9.     )
  10.     }
  1. //pages/mine.js
  2. import Link from 'next/link'
  3. export default ()=>{
  4.     return (
  5.   <>
  6.           <div>这是mine页面</div>
  7.       <div><Link href="/">回退 </Link></div>
  8.   </>
  9.     )
  10.     }

1.2router模块跳转

  1. import Router from 'next/router'
  2. export default ()=>{
  3.   const clickHandle=()=>{
  4.     Router.push('/home/home')
  5.   }
  6. return (
  7.  <>
  8.      <button onClick={clickHandle}>跳转</button>
  9.  </>
  11. )
  12. }

image.png

2.路由传参

2.1标签传参

  1. //index.js
  2. import Link from 'next/link'
  3. const Home = () => {
  4.   return(
  5.     <>
  6.       <div>我是首页</div>
  7.       <div>
  8.         <Link href="/av?name=波多野结衣"><a>选波多野结衣</a></Link><br/>
  9.         <Link href="/av?name=苍井空"><a>选苍井空</a></Link>
  10.       </div>
  11.     </>
  12.   )
  14. }
  15. export default Home
  1. //av.js
  3. import { withRouter} from 'next/router'
  4. import Link from 'next/link'
  6. const Av = ({router})=>{
  7.     return (
  8.         <>
  9.             <div>{router.query.name},来为我们服务了.</div>
  10.             <Link href="/"><a>返回首页</a></Link>
  11.         </>
  12.     )
  13. }
  15. export default withRouter(Av)

2.2编程式传参

  1. import React from 'react'
  2. import Router from 'next/router'
  3. const Home = () => {
  4.   const getData=()=>{
  5.     Router.push({
  6.       pathname:"/av",
  7.       query:{
  8.         name:'小泽玛丽亚'
  9.       }
  10.     })
  11.   }
  12.   return(
  13.     <>
  14.       <div>我是首页</div>
  15.       <button onClick={getData}>点击获取</button>
  16.     </>
  17.   )
  19. }
  20. export default Home

3.路由钩子事件

image.png

3.1 routeChangeStart

这个时路由发生变化时，时间第一时间被监听到，并执行了里边的方法。

  1.  import Router from 'next/router'
  2. Router.events.on('routeChangeStart',(...args)=>{
  3.     console.log('1.routeChangeStart->路由开始变化,参数为:',...args)
  4.   })

3.2routeChangeComplete

路由变化开始时可以监听到，那结束时也时可以监听到的

  1.   import Router from 'next/router'
  2. Router.events.on('routeChangeComplete',(...args)=>{
  3.     console.log('routeChangeComplete->路由结束变化,参数为:',...args)
  4.   })

3.3beforeHistoryChange

history就是HTML中的API，如果这个不了解可以百度了解一下，Next.js路由变化默认都是通过history进行的，所以每次都会调用。 不适用history的话，也可以通过hash

  1.   Router.events.on('beforeHistoryChange',(...args)=>{
  2.     console.log('3,beforeHistoryChange->在改变浏览器 history之前触发,参数为:',...args)
  3.   })

3.4routeChangeError

需要注意的是404找不到路由页面不算错误

  1.   Router.events.on('routeChangeError',(...args)=>{
  2.     console.log('4,routeChangeError->跳转发生错误,参数为:',...args)
  3.   })

3.5hashChangeStart

hash模式下路由开始发生变化时

  1.  Router.events.on('hashChangeStart',(...args)=>{
  2.     console.log('5,hashChangeStart->hash跳转开始时执行,参数为:',...args)
  3.   })

3.6hashChangeComplete

hash模式下路由变化结束

  1. Router.events.on('hashChangeComplete',(...args)=>{
  2.     console.log('6,hashChangeComplete->hash跳转完成时,参数为:',...args)
  3.   })