初步学习next.js-3-6个路由钩子
<div class="cnblogs_code"><pre>import React from 'react'<span style="color: rgba(0, 0, 0, 1)">
import Link from </span>'next/link'<span style="color: rgba(0, 0, 0, 1)">
import Router from </span>'next/router'<span style="color: rgba(0, 0, 0, 1)">
const Home </span>= () =><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> gotoXiaojiejie(){
Router.push({
pathname:</span>'/xiaojiejie'<span style="color: rgba(0, 0, 0, 1)">,
query:{
name:</span>'井空'<span style="color: rgba(0, 0, 0, 1)">
}
})
}
Router.events.on(</span>'routeChangeStart',(...args)=><span style="color: rgba(0, 0, 0, 1)">{
console.log(</span>'1.routeChangeStart->路由开始变化,参数为:'<span style="color: rgba(0, 0, 0, 1)">,...args)
})
Router.events.on(</span>'routeChangeComplete',(...args)=><span style="color: rgba(0, 0, 0, 1)">{
console.log(</span>'2.routeChangeComplete->路由结束变化,参数为:'<span style="color: rgba(0, 0, 0, 1)">,...args)
})
Router.events.on(</span>'beforeHistoryChange',(...args)=><span style="color: rgba(0, 0, 0, 1)">{
console.log(</span>'3,beforeHistoryChange->在改变浏览器 history之前触发,参数为:'<span style="color: rgba(0, 0, 0, 1)">,...args)
})
Router.events.on(</span>'routeChangeError',(...args)=><span style="color: rgba(0, 0, 0, 1)">{
console.log(</span>'4,routeChangeError->跳转发生错误,参数为:'<span style="color: rgba(0, 0, 0, 1)">,...args)
})
Router.events.on(</span>'hashChangeStart',(...args)=><span style="color: rgba(0, 0, 0, 1)">{
console.log(</span>'5,hashChangeStart->hash跳转开始时执行,参数为:'<span style="color: rgba(0, 0, 0, 1)">,...args)
})
Router.events.on(</span>'hashChangeComplete',(...args)=><span style="color: rgba(0, 0, 0, 1)">{
console.log(</span>'6,hashChangeComplete->hash跳转完成时,参数为:'<span style="color: rgba(0, 0, 0, 1)">,...args)
})
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)">(
</span><>
<div>我是首页</div>
<div>
<Link href={{pathname:'/xiaojiejie',query:{name:'结衣'}}}><a>选结衣</a></Link><br/>
<Link href="/xiaojiejie?name=井空"><a>选井空</a></Link>
</div>
<div>
<button onClick={gotoXiaojiejie}>选井空</button>
</div>
<div>
<Link href="#jspang"><a>选JSPang</a></Link>
</div>
</>
<span style="color: rgba(0, 0, 0, 1)">)
}
export </span><span style="color: rgba(0, 0, 255, 1)">default</span> Home</pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/lxz-blogs/p/13151984.html
頁:
[1]