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
  • 相关阅读:
    GNU C的定义长度为0的数组
    Ubuntu如何启用双网卡
    DQN 文章第一篇
    awk用法
    Linux下C结构体初始化
    Linux kernel中的list怎么使用
    从美剧中学(1)
    Python @property 属性
    p40_数据交换方式
    3.TCP协议
  • 原文地址:https://www.cnblogs.com/lxz-blogs/p/13151984.html
Copyright © 2011-2022 走看看