Nuxt3嵌套路由场景下，如何从参数获取当前页面名称？

你的场景里，/dashboard/alert 是固定路由而非动态参数路由，所以直接从 useRoute() 的 params 里拿不到页面名称，可通过以下两种方式实现：

方法一：从路由路径中提取 #

直接拆分当前路由的 path 属性，取最后一段作为页面名称：

<script setup>
const route = useRoute()
// 拆分路径并获取最后一段
const pageName = route.path.split('/').pop()
</script>

<template>
  <div>当前页面：{{ pageName }}</div>
</template>

方法二：从路由名称中提取 #

Nuxt3 会自动为嵌套路由生成「父路由名-子路由名」格式的路由名称（比如 /dashboard/alert 对应的路由名为 dashboard-alert），可拆分这个名称来获取页面名称：

<script setup>
const route = useRoute()
// 拆分路由名称并获取最后一段
const pageName = route.name.split('-').pop()
</script>

<template>
  <div>当前页面：{{ pageName }}</div>
</template>

两种方法的区别：

• 路径拆分更直接，适合简单的路由结构；
• 路由名称拆分更稳定，即使后续给路由设置别名或修改路径，只要路由名称的命名规则不变，就能正常获取。

内容的提问来源于stack exchange，提问作者foliwe83