useRoute
和useRouter
都是Vue Router 4中的Composition API,它们的主要区别在于用途和功能。useRoute
主要用于获取当前路由的信息,而useRouter
主要用于执行导航操作和访问全局路由器实例。
1. useRoute
:用于获取当前路由对象的信息。它提供了关于当前活动路由的各种信息,如路径、参数、查询参数等。你可以使用useRoute
来访问当前路由的状态,并根据这些信息执行相应的操作。
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
console.log(route.path) // 输出当前路由的路径
console.log(route.params) // 输出当前路由的参数
console.log(route.query) // 输出当前路由的查询参数
}
}
2. useRouter
:用于访问全局的路由器实例。它允许你在组件中执行导航操作,如跳转到其他路由、获取路由信息等。
import { useRouter } from 'vue-router'
export default {
setup() {
const router = useRouter()
function goToHomePage() {
router.push('/') // 跳转到首页
}
return {
goToHomePage
}
}
}