vue3获取当前路由地址的两种方法

下面是具体的攻略：

Vue3获取当前路由地址的两种方法

在Vue3中，我们可以使用两种方法来获取当前路由地址，分别是使用$route对象和使用useRoute函数。下面我们将介绍这两种方法，以及如何使用它们来获取当前路由地址。

使用$route对象获取当前路由地址

在Vue3中，我们可以使用$route对象来获取当前路由地址。$route对象是Vue Router提供的一个对象，它包含了当前路由的相关信息，包括路由地址、参数、查询参数等等。

我们可以在Vue组件中通过this.$route来访问$route对象，然后通过$route对象中的path属性来获取当前路由地址。下面是一个示例：

<!-- MyComponent.vue -->
<template>
  <div>
    当前路由地址是 {{ $route.path }}
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$route.path)
  }
}
</script>

以上代码演示了如何在template模板中通过$route对象来访问当前路由地址。在mounted钩子函数中使用console.log来打印出当前路由地址。

使用useRoute函数获取当前路由地址

Vue3中还提供了一个useRoute函数，它可以用来获取当前路由地址。useRoute是Vue Router提供的一个React Hooks风格的API。

我们可以在Vue组件中使用useRoute函数，然后通过这个函数返回的$route对象来访问当前路由地址。下面是一个示例：

<!-- MyComponent.vue -->
<template>
  <div>
    当前路由地址是 {{ route.path }}
  </div>
</template>

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

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

    console.log(route.path)

    return {
      route
    }
  }
}
</script>

以上代码演示了如何在setup函数中使用useRoute函数来获取当前路由地址。在setup函数中通过const route = useRoute()来获取当前路由地址，并且在控制台中使用console.log打印出当前路由地址。

总结
以上就是Vue3获取当前路由地址的两种方法。我们可以通过$route对象或者useRoute函数来获取当前路由地址，然后在Vue组件中使用这个路由地址。在实际开发过程中，根据具体情况来选择合适的方法。