theme: vuepress
发现问题
本站在从nuxt2向nuxt3迁移时，顶部的菜单发现不能够高亮显示了，于是开始着手解决这个问题。
主要是子路由不会高亮，例如文章的地址是/read，当访问/read时可以高亮的，但是访问/read/post/xxx时就不可以高亮了，nuxt2时依然会。
问题环境
nuxt和vue的不同之处在于nuxt会根据目录自动生成路由，因此我们需要将目录创建规范，先来看目录：
- pages
- app.vue
这种目录形式在nuxt3中访问/post目录下的内容时，不会触发路由的高亮效果，那么nuxt3中如何解决这个呢？
解决思路
这个时候我们来看read目录下的index.vue，它是可以使用高亮效果的，那么访问read目录和read/post目录有什么区别呢？为什么read目录下可以高亮，而read的 子目录 却不可以呢？
我们认为post是read的子目录，可是post是否真的是read的子目录呢？
先来看read下的index，访问域名：http://www.zngg.net ，会进入到pages下的index，这里我app.vue中是这样写的：
<template>
<NuxtLayout />
</template>
<script setup lang="ts">
</script>
可以看到我们应该先进入了一个Layout，这里我有写自己默认的layout：default.vue
<template>
<div>
<Toolbar />
<NuxtChild />
</div>
</template>
随后根据NuxtChild进入了我们的pages下面的index.vue，也就是说我们是一层一层进入的。再来看我们的post目录和read目录，除了post目录是read目录的子目录以外，他们并没有其他关联，那么是不是可以用过NuxtChild这种方式让他们产生关联呢？
解决问题
我们先在pages下新建一个read.vue,内容为：
<template>
<div>
<NuxtPage />
</div>
</template>
<script setup lang="ts">
</script>
之后在read目录下新建一个post.vue，内容为：
<template>
<div>
<NuxtPage />
</div>
</template>
<script setup lang="ts">
</script>
这样让他们产生关联，ctrl+d结束调试nxut，再使用命令：
yarn dev
开启调试
直接访问/read/post/xxx，会发现/read标签已经产生了高亮class：router-link-active，我们只需要写入对应的css即可:
.router-link-active,
.router-link-exact-active {
color: #3955f6;
font-weight: 900;
}
