文章统计:245字,预计阅读:小于一分钟。

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>
  1. 访问localhost/test-123路径。

嵌套路由

  1. 创建pages\parent\child.vue文件
<template>
  <div>child</div>
</template>
  1. 创建pages\parent.vue文件,即与文件夹同名就视为嵌套路由
<template>
  <div>
    parent page
    <!-- 嵌套路由出口 -->
    <NuxtChild/>
  </div>
</template>
  1. 访问localhost/parent/child地址, 因为子路由是在 parent 文件夹下,所以路径 localhost/parent/child后面需要带有child。没有带则不会显示子路由的出口。
  2. 在只访问localhost/parent时需要有默认的路由出口:需要新建pages\parent\index.vue文件即可.
<template>
  <div>parent默认的出口</div>
</template>
最后更新时间:
贡献者: tomiaa