初识 Nuxt3 —— 路由与传参

「时光不负，创作不停，本文正在参加2021年终总结征文大赛」

昨天我们学习了如何创建项目以及最基本的路由知识，今天继续昨天的路由出发，更加深入的探索 Nuxt3 的路由。

Nuxt将自动将Vue-Router和映射 pages/ 目录集成到应用程序的路由中。

Nuxt 是自动匹配项目的 pages 目录生成 vue-router 的路由配置信息然后集成到项目中，这使得项目的路由构建更加的方便，不用去关注类似与 router.js 这样的配置，非常的灵活方便。并且pages/ 这个文件是可选的，对于我们开发没有落地页或者是没有路由的应用程序来说，vue-router 的依赖将不会包含在项目中，这一点对于不需要路由的应用程序来说也是非常友好的，能够减少一部分项目包体积。

与组件不同的是，在使用 pages 时建议只有单个根元素（vue3 组件支持多个根元素），以支持 Nuxt 在页面之间进行路由切换时能使用 来设置动画的元素根结点。

动态路由

如果在文件名中以方括号的形式包裹名称，如 [id].vue ，那么 [id] 就成为了动态路由的参数

我们尝试增加一点难度，在 pages/ 文件中创建 temp-[name] 文件夹，然后在文件夹中创建 [id].vue

在 app.vue 使用 NuxtLink 跳转动态路由页，关于 <NuxtLink> 的更多用法可查看 Vue-Router 文档。

<template>
     <div>
	<NuxtLink to="/temp-page/admin">去page-admin</NuxtLink>
        <NuxtPage />
    </div>
</template>

在 pages/temp-[name]/[id].vue 中使用 {{ $route.params.id }} 使用动态的参数

<template>
    <div>
	{{ $route.params.name }}-{{ $route.params.id }}
    </div>
</template>

页面成功展示出 page-admin

嵌套路由

Nuxt 中给 RouterView 提供了一个别名—— <NuxtChild> 组件，用于显示嵌套路由的子组件。

🌰

-| pages/
---| parent/
------| child.vue
---| parent.vue

// pages/parent.vue
<template>
    <div>
        parent
	<NuxtChild />
    </div>
</template>

浏览 /parent/child 路径，可以看到 parent 和 child 的内容，如果仅浏览 /parent 路径，则仅展示 parent 的内容了。

这里有个有趣的现象，因为 parent 文件夹里面创建 index.vue 能代表着 /parent 路径来展示 parent 的内容，parent.vue 也代表着 /parent 展示 parent 的内容，如果我们既在 /pages/parent/ 下创建 index.vue 文件，也在 /pages 路径下创建 parent.vue 文件。如下：

-| pages/
---| parent/
------| index.vue
------| child.vue
---| parent.vue

我们访问 /parent 路径，会发现会展示两份 parent 页面内容，再访问 /parent/child 路径，发现只展示来一份 parent 内容和一份 child 的内容。

如上这种情况建议在 parent 文件下创建 index.vue 文件来表示 /parent 的内容，不建议在 parent 同路径下创建同名 parent.vue 文件，避免不必要的情况产生，并且这样做有助于我们关注分离。

Nuxt 中路由传参与Vue一致——Nuxt 集成vue3，所以路由如何使用这块基本上看 Vue-Router 文档 即可。

Ok，今天就到这里，明天继续探索 Nuxt 的更多的玩法。