中文文档：Next.js

路由跳转Router VS Link

Router

import Router from 'next/router';

export default ({childre}) => (
    <div>
        <p onClick={()=>Router.push({
            pathname:'/detail',
            query:{arg:item}
        })>跳转到详情页<p>
    </div>
)

export default ({url}) => {
    <div>
        <h2>我是详情页</h2>
        <p>{url.query.arg}</p>
    </div>
}

Link

import Head from 'next/head';
import Link from 'next/router';

export default ({childre}) => (
    <div>
        <Head>
            <title>共同头部测试</title>
        </Head>
        <div>
            <Link href="/">主页</Link>
            <Link as="l" href="/list">列表</Link>
            <Link as="d" href="/detail">详情</Link>
        </div>
        {children}
        <footer>
            @版权所有，未经允许...
        </footer>
    </div>
)

路由预加载

标签添加prefetch属性

<Link href="/detail" prefetch> 详情</Link>

使用 withRouter 高阶组件

import withRouter from 'next/router';

export default withRouter(({children,router}) => {
    <div>
        <p onClick={()=>Router.push({
            pathname:'/detail',
            query:{arg:item}
        })>跳转到详情页<p>
        {router.prefetch('/detail')}
    </div>
})

路由的事件

routerChangeStart(url) //路由跳转开始
routerChangeComplete(url) //路由跳转完成
routerChangeError(err,url) //路由跳转失败
routerHistoryChange(url) //浏览历史改变

路由守卫

import Router from 'next/router';

Router.envents.on('routerChangeStart',(url)={
    if('url' === '/list'){
        location.href = './detail'
    }
})