参考网址

Nuxt 依据 pages 目录结构自动生成 vue-router 模块的配配置。

也就是说，当我们创建了 pages 目录后，Nuxt 会自动根据该目录地下文件（夹）来构建 routes 是数组。

特别注意，pages 中的 .vue 文件必须有一个单一的根元素，以允许 Nuxt 进行路由跳转。即，不支持 Vue3的 Fragment 特性。

一、简单路由匹配

index.vue // {path: '/'}
404.vue //  {path: '/404'}
index.index.vue // {path: 'index.index'}

（一）index.vue 示例

会报警告：xxx.vue does not have a single root node and will cause errors when navigating between routes

这是因为，<template> 标签中不是一个 单一根元素。编译器将暴露的 html 注释也作为了一个元素标签。

<template>
    <!-- path => / -->
    <div> I am index</div>
</template>

<template>
  <div>
    <!-- path => /404 -->
    <div>I am 404</div>
  </div>
</template>