nuxt3实战之alone-blog（二）：先了解一下nuxt3的路由吧

不装了，摊牌了，前面的《一、nuxt3项目引入tailwindcss3》只是为了后续alone系列之alone-blog的诞生，alone-blog的初衷是什么呢，噢，想到了，就是让小伙伴们快速搭建出高质量的个人博客网站、门户网站、企业官网这类的网站，当然，一切从简单开始。

一、先看一下nuxt3的路由

nuxt3不需要像vue一样去手动写路由，nuxt3路由而是根据目录自动生成的。首先手动创建pages文件夹，在其中再依次创建index.vue和about.vue文件，并在两个文件中随便写点什么。这时候其实nuxt3已经为我们自动生成了/index和/about两条路由，这时候在浏览器访问localhost:3000/about，就可以看到两个文件中的内容了。

如果你没有看到，那需要将<NuxtPage />添加到app.vue中，然后再次去看。

<template>
  <div>
    <p class="text-3xl text-green-500 m-20">这是nuxt3+tailwindcss3新项目</p>
    <NuxtPage />
  </div>
</template>

然后还有一点是跳转路由，在html中跳转路由用超链接a标签，但是在这里，你可以使用：<nuxt-link to="/about">关于我们</nuxt-link>

二、动态路由

比如文章详情页一般都是根据文章id去展示对应的文章，这时候就需要动态路由了。那么nuxt3中的动态路由是什么样的呢？

在pages文件夹中创建info文件夹和[id].vue文件（pages/info/[id].vue），然后在文件中：

<template>
	<div>
	  我的id是
	  <p>{{ $route.params.id }}</p>
	</div>
</template>

<script setup>
    const route = useRoute()
    console.log('id参数为：'+route.params.id)
</script>

这时候访问路由/info/2就可以看到页面输出的id为2，这就是动态路由了。关于路由的其他用法看官方文档就行了，这里只记录alone-blog目前用到的。

最后附上，目前的alone-blog项目目录：