zoukankan      html  css  js  c++  java
  • 初步学习next.js-3-6个路由钩子

    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)=>{
        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:'/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>
        </>
      )
    
    }
    export default Home
  • 相关阅读:
    js-url打开方式
    eclipse删除所有空行
    Oracle重启 error: ora-01034:oracle not available ora-27101:shared memory realm does not exist
    最近面试遇到了高阶函数的概念混乱了
    关于跨域的cookie问题
    二叉树 呜呜
    函数的尾递归
    react context
    二叉树
    dom3级事件
  • 原文地址:https://www.cnblogs.com/lxz-blogs/p/13151984.html
Copyright © 2011-2022 走看看