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)
  • 相关阅读:
    HTML 网页创建
    CSS3 opacity
    两数相加的和
    九九乘法表
    Linux下的Makefile初入
    linux 下定义寄存器宏 实现类似于STM32的寄存器操作
    Linux 编译与交叉编译
    linux IMX6 汇编点亮一个LED灯
    Linux基本指令与作用
    C# Task 源代码阅读(2)
  • 原文地址:https://www.cnblogs.com/lxz-blogs/p/13151614.html
Copyright © 2011-2022 走看看