0
点赞
收藏
分享

微信扫一扫

next路由钩子

程序小小黑 2022-02-09 阅读 82

import { Button } from 'antd'
import Link from 'next/link'
import Router  from 'next/router'
function HomePage() {
  function toA() {
    Router.push({
      pathname: '/a',
      query: {
        id: 3
      }
    })
  }
  Router.events.on('routeChangeStart',(...args)=>{
    console.log('1.routeChangeStart->路由开始变化,参数为:',...args)
  })

  Router.events.on('routeChangeComplete',(...args)=>{
    console.log('2.routeChangeComplete->路由结束变化,参数为:',...args)
  })

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

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

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

  Router.events.on('hashChangeComplete',(...args)=>{
    console.log('6,hashChangeComplete->hash跳转完成时,参数为:',...args)
  })
  return (
    <>
      <Link href='/a?id=2' title='a'>
        <Button>Welcome to Next.js!</Button>
      </Link>
      <Button onClick={toA}>跳转去a</Button>
    </>
  )
  }

  export default HomePage
举报

相关推荐

0 条评论