Nuxt3 路由高亮

发现问题

我的网站在从nuxt2向nuxt3迁移时，顶部的菜单发现不能够高亮显示了，于是开始着手解决这个问题。

主要是子路由不会高亮，例如文章的地址是/read，当访问/read时可以高亮的，但是访问/read/post/xxx时就不可以高亮了，nuxt2时依然会。

问题环境

nuxt和vue的不同之处在于nuxt会根据目录自动生成路由，因此我们需要将目录创建规范，先来看目录：

• pages
  • read
    • post
      • _id.vue
    • index.vue
  • index.vue
• app.vue 这种目录形式在nuxt3中访问/post目录下的内容时，不会触发路由的高亮效果，那么nuxt3中如何解决这个呢？

解决思路

这个时候我们来看read目录下的index.vue，它是可以使用高亮效果的，那么访问read目录和read/post目录有什么区别呢？为什么read目录下可以高亮，而read的 子目录 却不可以呢？

我们认为post是read的子目录，可是post是否真的是read的子目录呢？

先来看read下的index，访问域名：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;
}

原文：www.zngg.net/read/post/9…