Vue3的useRouter和useRoute

useRouter

import { useRouter } from "vue-router"

export default {
  setup() {
    const router = useRouter()

    // 使用 router 实例进行导航操作
    router.push("/home")

    return {}
  }
}

当使用 Vue Router 进行路由导航时，我们可以使用 useRouter 和 useRoute 这两个实例来获取路由相关的信息。

useRouter
useRouter 是一个 Vue Composition API 提供的函数，用于获取当前路由器实例。可以通过调用 useRouter() 来获取路由器实例，然后可以使用该实例来执行一些导航操作

useRoute

mport { useRoute } from "vue-router"

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

    // 获取当前路由的路径
    console.log(route.path)

    // 获取当前路由的参数
    console.log(route.params)

    // 获取当前路由的查询参数
    console.log(route.query)

    return {}
  }
}

useRoute 是一个 Vue Composition API 提供的函数，用于获取当前路由的信息。可以通过调用 useRoute() 来获取当前路由的信息对象。