在Vue3中， Vue Router 提供新的API更好地与 Composition API 集成。提供useRouter、useRoute两个函数，在用于组件中访问当前路由信息和路由实例。
-
useRoute
返回当前的路由地址，这个路由对象包含了当前路由的许多信息，比如路径、参数、查询、hash等。相当于在模板中使用 $route。
useRoute实例
示例代码：
import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
console.log(route.path) // 输出当前路由的路径
console.log(route.params) // 输出当前路由的参数
console.log(route.query) // 输出当前路由的查询参数
// ... 其他操作
}
}
-
useRouter
返回路由器实例。相当于在模板中使用 $router。通过这个路由实例，我们可以进行诸如导航、编程式导航等操作。
useRouter实例
示例代码：
import { useRouter } from 'vue-router'
export default {
setup() {
const router = useRouter()
router.push('/home') // 导航到/home路径
router.replace('/about') // 替换当前路由为/about路径
router.go(-1) // 后退一步
// ... 其他操作
}
}
useRoute 和 useRouter 区别
- useRoute 主要用于获取当前路由的信息，适用于静态展示当前路由信息的场景。
- useRouter 主要用于获取路由实例，适用于需要进行动态路由操作的场景，比如跳转到新的路由。
