next 笔记

最新推荐文章于 2024-07-11 13:58:34 发布

东湖高新第一会所掌门人

最新推荐文章于 2024-07-11 13:58:34 发布

阅读量229

点赞数

文章标签： reactjs

本文链接：https://blog.csdn.net/qq_42359718/article/details/108433071

版权

路由钩子

import {widthRouter}  from  'next/Router'
Router.push(
		{
			pathname:'',
			query:{name:''}
		}
	)

const demo  = ({router}) =>{
	return <>
				<Link href=""> </Link>
		</>
}

export default widthRouter



  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)
  })

懒加载

外部库懒加载
在代码中不引入

	const handelChange = async () => {
		// 引入
			const moment = await  import ('moment)
		// 使用
			moment.default()
	}

组件懒加载
dynamic

import dynamic from 'dynamic'
	const DynamicComponent = dynamic(import('componetn  path'))

head seo

import Head from 'next/head'

<Head>
	<title></title>
	<meta></meta>
</Head>

next 中饮引用antd -ui

安装 @zeit/next-caa

npm i @zei/next-css
  新建 next.config.js 文件
  	code:
		const widthCss = require('@zeit/next-css)
			if(typeof require !== 'undefined;){
		require.extwnsion['.css']= file={}
		}
}
module.exports = widthCss({})


安装beble-plugin-import 

 创建.babelrc 文件
 		{
	"presets": :[ "next/babel"],
	"plugins":[
			"import ",
			{
			"libraryName":"antd",
			"style":"css"
			}
		]
	}

打包踩坑

安装antd 后打包会有css 报错
处理方式：在pages 文件夹下创建 _app.js 将需要全局引入的资源在这里引入（ antd.css）

东湖高新第一会所掌门人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
next 笔记

路由钩子import {widthRouter} from 'next/Router'Router.push( { pathname:'', query:{name:''} } )const demo = ({router}) =>{ return <> <Link href=""> </Link> </>}export default widthRouter Router.events
复制链接

扫一扫