在 Vue.js 3.x 中,我们可以使用 useRouter
和 useRoute
来获取当前路由对象和当前路由信息。
useRouter
useRouter
可以用来获取当前路由对象。我们可以通过 router
对象调用一些路由操作方法,例如 push
、replace
、go
等。示例代码如下:
import { defineComponent } from 'vue' import { useRouter } from 'vue-router' export default defineComponent({ setup() { const router = useRouter() const handleClick = () => { // 跳转到 /user/123 路径 router.push({ name: 'user', params: { id: 123 } }) } return { handleClick } } })
在上述示例中,我们使用 useRouter
获取到了 router
对象,然后通过 router.push
方法实现了路由跳转。
useRoute
useRoute
可以用来获取当前路由信息。我们可以通过 $route
对象获取到路由的一些信息,例如当前路径、参数、查询参数等。示例代码如下:
import { defineComponent } from 'vue' import { useRoute } from 'vue-router' export default defineComponent({ setup() { const route = useRoute() return { path: route.path, params: route.params, query: route.query } } })
在上述示例中,我们使用 useRoute
获取到了 $route
对象,然后通过 $route.path
、$route.params
、$route.query
等属性获取到了当前路由的一些信息。