nuxt.js 3 路由配置

app.vue

<template>
  <div>
    <!-- 使用 vue-router 路由 -->
    <NuxtPage />
  </div>
</template>

pages

1. 根目录创建pages文件夹
2. pages/index.vue就是项目的首页，启动项目后会根据文件名自动生成路由。

动态路由

文件夹有[]包裹的即为路由参数

1. 创建 pages\test-[id].vue 文件。

<template>
  <div>
    动态路由{{$route.params.id}}
  </div>
</template>

2. 访问localhost/test-123路径。

嵌套路由

1. 创建pages\parent\child.vue文件

<template>
  <div>child</div>
</template>

2. 创建pages\parent.vue文件，即与文件夹同名就视为嵌套路由

<template>
  <div>
    parent page
    <!-- 嵌套路由出口 -->
    <NuxtChild/>
  </div>
</template>

3. 访问localhost/parent/child地址, 因为子路由是在 parent 文件夹下,所以路径 localhost/parent/child后面需要带有child。没有带则不会显示子路由的出口。
4. 在只访问localhost/parent时需要有默认的路由出口：需要新建pages\parent\index.vue文件即可.

<template>
  <div>parent默认的出口</div>
</template>