路由六个钩子事件.pdfVIP

路由六个钩子事件 路由的钩子事件，也就是当路由发生变化时，可以监听到这些变化 事件，执行对应的函数。它一共有六个钩子事件 1.routeChangeStart 路由开始变化时 Router.events.on(routeChangeStart ,(...args)={ console.log(1.routeChangeStart-路由开始变化,参 数为:,...args) }) 这个时路由发生变化时，时间第一时间被监听到，并执行了里边的 方法 2.routeChangeComplete 路由结束时 路由变化开始时可以监听到，那结束时也时可以监听到的，这时候 监听的事件是routerChangeComplete Router.events.on(routeChangeComplete,(...args)= { console.log(routeChangeComplete-路由结束变化,参 数为:,...args) }) 3.beforeHistoryChange 浏览器history 触发前 history就是HTML中的API，如果这个不了解可以百度了解一下， Next.js路由变化默认都是通过history进行的，所以每次都会调 用。 不适用history的话，也可以通过hash Router.events.on(beforeHistoryChange,(...args)= { console.log(3,beforeHistoryChange-在改变浏览器 history之前触发,参数为:,...args) }) 4.路由跳转发生错误时 Router.events.on(routeChangeError,(...args)={ console.log(4,routeChangeError-跳转发生错误,参 数为:,...args) }) 5.转成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) }) import React from react import Link from next/link import Router from next/router const Home = () = { function gotoXiaojiejie(){ Router.push({ pathname:/xiaojiejie, query:{ name:井空 } }) } 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)= {