Vue3中获取当前路由的最佳实践：探索3种高效方法

2024-03-25 23:08:52

在Vue3中获取当前路由的最佳实践

概述

在Vue3中获取当前路由与Vue2有所不同，本文将探讨在Vue3中获取当前路由的最佳实践。

1. 路由守卫

使用路由守卫是获取当前路由的一种简单有效的方法。路由守卫在组件挂载时调用，因此可以确保在组件每次加载时获取最新路由信息。

import { onMounted } from 'vue'
import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    onMounted(() => {
      console.log(route.path) // 当前路径
    })
  }
}

2. 全局注入

Vue3引入了全局注入功能，允许在所有组件中访问特定对象。我们可以使用此功能将路由实例注入到所有组件中。

import { createApp } from 'vue'
import { useRoute } from 'vue-router'

const app = createApp(...)
app.config.globalProperties.$route = useRoute()

然后可以在任何组件中使用$route属性：

export default {
  setup() {
    console.log(this.$route.path) // 当前路径
  }
}

3. 使用inject

inject功能允许我们手动注入依赖关系。我们可以使用此功能注入路由实例。

import { inject } from 'vue'
import { ROUTER_KEY } from 'vue-router'

export default {
  setup() {
    const router = inject(ROUTER_KEY)
    const route = router.currentRoute.value
    console.log(route.path) // 当前路径
  }
}