useRoute
和 useRouter
是两个在前端开发中常见的钩子(hook),特别是在使用 Vue.js 和 React.js 这样的现代 JavaScript 框架时。尽管它们名字相似,但它们的用途和来源是不同的。
useRoute (Vue Router)
useRoute
是 Vue Router 提供的一个 Composition API 钩子,用于在 Vue 3 的 Composition API 风格组件中获取当前路由的信息。它返回一个包含当前路由信息的对象,比如路由的路径、参数、查询参数等。
<script setup>
import { useRoute } from 'vue-router'; const route = useRoute(); console.log(route.path); // 当前路由的路径
console.log(route.params); // 当前路由的参数
console.log(route.query); // 当前路由的查询参数
</script>
useRouter (Vue Router)
useRouter
是 Vue Router 提供的另一个 Composition API 钩子,用于在 Vue 3 的 Composition API 风格组件中获取 Vue Router 的实例。通过这个实例,你可以调用各种路由相关的方法,比如导航到一个新的路由、替换当前路由、返回上一个路由等。
<script setup>
import { useRouter } from 'vue-router'; const router = useRouter(); function navigateToHome() { router.push({ name: 'home' }); // 使用路由名称导航
} function replaceCurrentRoute() { router.replace({ path: '/about' }); // 替换当前路由
}
</script>
总结
useRoute
是 Vue Router 提供的钩子,用于获取当前路由的信息。
useRouter
是 Vue Router 提供的钩子,用于获取 Vue Router 的实例,从而可以调用路由相关的方法。