zoukankan      html  css  js  c++  java
  • 初步学习next.js-2-组件,路由,传递参数

    pages和components

     1.直接在根目录下的pages文件夹下,新建一个jsyang.js页面,启动后 访问路径为/jsyang

     2.在根目录下新建文件夹components,新建组件com1.js文件,

    export default ({children})=><button>{children}</button>

       在需要引入的页面中

    import Com1 from '../components/com1'

       直接写

    <Jspang>按钮</Jspang>

    路由和跳转

      标签式导航

    import Link from 'next/link'
    import Link from 'next/link'
    
    export default ()=>(
        <>
            <div>A page </div>
         // link标签里必须家<a></a> <Link href="/"><a>返回首页</a></Link> </> )

      Router模块进行跳转

    import Router from 'next/router'
     <div>
        <button onClick={()=>{Router.push('/jspangA')}}>去A页面</button>
      </div>

    传递和接收参数

      传递参数,只能用query来传递

    import Router from 'next/router'
    import Link from 'next/link'
    <Link href="/xiaojiejie?name=aaaa"><a>aaaa</a></Link><br/
    Router.push('/xiaojiejie?name=井空')
    Router.push({
          pathname:'/xiaojiejie',
          query:{
            name:'井空'
          }
        })
    <Link href={{pathname:'/xiaojiejie',query:{name:'aaa'}}}><a>aaa</a></Link><br/>

      接收参数

    import { withRouter} from 'next/router'
    
    const Xiaojiejie = ({router})=>{
        return (
            <>
                <div>{router.query.name},来为我们服务了 .</div>
            </>
        )
    }
    
    export default withRouter(Xiaojiejie)
  • 相关阅读:
    safeNet
    网店
    微信公众号自定义菜单与回车
    西游记对教育的启发
    zencart资源
    cmd批处理常用符号详解
    div垂直居中
    git工作量统计
    VS2012变化的快捷键:
    sql 树 递归
  • 原文地址:https://www.cnblogs.com/lxz-blogs/p/13151614.html
Copyright © 2011-2022 走看看