Vue.js 3 中如何轻松获取当前路由路径和名称？

vue.js

2024-03-06 09:09:55

在 Vue.js 3 中巧妙获取当前路由路径和名称

问题诊断：困在 `/` 中的路由

在 Vue.js 3 的世界中，useRoute() 钩子是获取当前路由信息的利器，但有时候，我们可能陷入困境，发现 route.path 只显示 /。不要慌张，这可能源于以下几个因素：

组件错位： 确保你在使用 router-view 渲染路由的组件中使用 useRoute()。router-link 组件负责导航，不适合查询路由信息。
嵌套路由： 如果你的路由是嵌套结构，useRoute() 返回的是当前嵌套路由的信息，而非根路由。
路由守卫： 这些卫士可能会修改或终止导航，导致预期的路由信息无法获取。

解决之道：拨云见日

为了解决这些问题，不妨尝试以下方法：

使用 router-view 渲染路由的组件中使用 useRoute()。
检视嵌套路由结构，确保从正确的组件中获取路由信息。
检查是否存在干扰路由导航的路由守卫。

获取路由名称：直达核心

除了获取路由路径，route.name 属性还能让我们直达路由的名称核心。例如：

const route = useRoute();
console.log(route.name);

代码示例：照亮前路

以下是一个完整的代码示例，展示如何获取当前路由路径和名称：

<template>
  <div>
    <p>当前路由路径：{{ route.path }}</p>
    <p>当前路由名称：{{ route.name }}</p>
  </div>
</template>

<script>
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();

    return {
      route,
    };
  },
};
</script>