< 关於 next.js: 开始打地基| Next中的Pages，究竟有什麽用途？ >

09-15-2021

本章内容

• pages意想不到的用途！
  • 每个页面都是以pages作为基准路径
• 动态路径使用说明书
  • 有query对象
  • 多个动态路径的方式
  • 使用next/link的路径方式
  • 使用到全部的路径方式

pages意想不到的用途！

每个页面都是以pages作为基准路径

在建立完新的专案後，在资料夹中会发现有一个名字叫做pages的资料夹，这是我们现在要讲的主题！
我们可以使用: .js、jsx、.ts、.tsx，各种JavaScript的写法输出component的页面。
每一个在pages中的档案都会是以pages当作路径。

// 假设在pages有一个cat.js页面
// 那麽cat.js的路径就会是：`/cat`

function Cat(){
  return <div>Cat</div>
}

expert default Cat

动态路径使用说明书

在next.js 中无法使用/apple/:id的参数路由的方式得到参数，只能透过query的方式获取到参数，/apple/[pid].js的方式，页面网址会匹配页面：apple/1、apple/2。

有query对象

// /apple/1
{"id":"1"}

// /apple/1?pid=abc

多个动态路径的方式

pages/cat/[pid]/[comment].js--->匹配的路径为/pages/apple/cat-comment
[pid]在这里的角色是，页面
[comment]在这里的角色，页面内容
query的对象为：

{"pid":"apple","comment":"cat-comment"}

使用next/link的路径方式

使用next/link的方式

1. 引入next/link到component中
2. 使用Link标签，这边会被编译成a连结

import Link from 'next/link'

function Cat() {
  return (
    <ul>
      <li>
        <Link href="/cat/abc">
          <a>去吧！ pages/cat/[pid].js</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home

使用到全部的路径方式

使用...在括号内的扩展符号，可以扩展动态路径用来获取全部的路径。
例如:pages/cat/[...slug].js--->会匹配成cat/a、cat/ab、cat/abc

• slug也可以使用[...param]的名称。

1. 路径cat/a会有的query对象如下，匹配的参数会作为查询的参数在发送到页面，并且会是一个阵列。

{"slug":["a"]}

2. 若是有两个以上匹配路径的话，新的参数添加的方式如下:cat/ab

{"slug":["a","b"]}

3. 可以选择的多重路径。通过[[...slug]]包含参数，这样的路径下是可以被当成可以选择的。
   pages/cat/[[...slug]].js，会匹配的路径为/cat、cat/a、cat/ab。
   与一开始的pages/cat/[...slug].js的差别在於，可以选择的多重路径也匹配不带参数的路由。如/cat
4. 不提供路由参数的状况下query会是一个空阵列