P05：路由的六个钩子事件

￡神魔★判官ぃ 2023-10-06 21:01 49阅读 0赞

#### Next.js 教程 ####

*  阐述
 *  routerChangeStart 路由发生变化时
 *  routerChangeComplete 路由结束变化时
 *  beforeHistoryChange 浏览器history触发前
 *  routeChangeError 路由跳转发生错误时
 *  转变成 hash 路由模式

## 阐述 ##

路由的钩子事件，也就是当路由发生变化时，可以监听到这些变化事件，执行对应的函数。它一共有六个钩子事件，接下来我们一起来学习一下。

## routerChangeStart 路由发生变化时 ##

在监听路由发生变化时，我们需要用 Router 组件，然后用 on 方法来进行监听，在 pages 文件夹下的 index.js，写入下面的监听事件，这里我们只打印一句话，就不作其他的事情了。

`next-create\pages\index.js`

Router.events.on('routeChangeStart',(...args)=>{
        
       console.log('1.routeChangeStart->路由开始变化,参数为:',...args)
    })

## routerChangeComplete 路由结束变化时 ##

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

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

## beforeHistoryChange 浏览器history触发前 ##

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

不适用history的话，也可以通过hash。

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

## routeChangeError 路由跳转发生错误时 ##

需要注意的是404找不到路由页面不算错误，这个我们就不演示了。

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

## 转变成 hash 路由模式 ##

还有两种事件，都是针对hash的，所以现在要转变成hash模式。  
hash模式下的两个事件 `hashChangeStart` 和 `hashChangeComplete`，就都在这里进行编写了。

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

在下面的jsx语法部分，再增加一个链接,使用 `hash`来进行跳转，代码如下：

<div>
        <Link href="/#willem"><a>选willem</a></Link>
    </div>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

为了方便你学习，这里给出index.js的全部代码，你可以在练习时进行参考。

`next-create\pages\index.js`

import React from 'react'
    import Link from 'next/link'
    import Router from 'next/router'
    
    const Home = () => {
        
      // gotoJavascript
      function gotoJavascript(){
        
        Router.push({
        
          pathname: '/javascript',
          query:{
        
            name: 'react教程'
          }
        })
      }
    
      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 (
        <>
          <div>我是首页</div>
          <div>
            <Link href={
        {
        pathname:'/javascript',query:{
        name:'react教程'}}}><a>react教程</a></Link><br/>
            {
        /* <Link href="/javascript?name=react教程"><a>react教程</a></Link> */}
            <Link href="/javascript?name=node教程"><a>node教程</a></Link>
            
          </div>
          <div>
            <button onClick={
        gotoJavascript}>选择react</button>
          </div>
    
          <div>
             <Link href="/#willem"><a>选willem</a></Link>
          </div>
        </>
      )
    }
    
    export default Home

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/a01f2cf3212b45c982ce4985cdb44727.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16