Vue.js 3.2 中 UseRouter 和 UseRoute 的用法详解

介绍

Vue.js 是一款流行的前端框架，由于其易用性和灵活性，在开发中得到了广泛的应用。而在 Vue.js 3.2 中，新增了许多 Composition API，其中 useRouter 和 useRoute 可以用于路由管理，使得前端路由开发更加方便。

useRouter 的用法

在前端开发中，我们经常需要程序处理用户的路由导航，这时候就需要用到 useRouter。它是一个用于获取当前路由实例的函数，我们可以调用这个函数来获取路由实例，然后进行路由导航。

useRoute 的用法

除了需要导航路由之外，我们还需要获取一些路由信息，这时候就需要用到 useRoute。它是一个用于获取当前路由对象的函数，我们可以调用这个函数来获取路由的参数、查询参数等信息。

安装路由

npm install vue-router

引入路由

import { useRouter, useRoute } from 'vue-router'

定义变量

const $router = useRouter()  // 这是路由跳转的
const $route = useRoute()  // 用于接收路由参数的

使用

(1)、路由跳转($router)

方式一：

$router.push('/add?name=12&age=12') // add/是要跳转的路由  name、age是参数

方式二：

$router.push({path: '/add', query: {
    name: "12",
    age: 12
}})

(2)、获取参数。

const name = route.query.name  // 获取路由的name参数值
const age = route.query.age  // 获取路由的age参数值

在上面的代码中，我们首先导入了 vue-router 中的 useRoute，然后在 setup 函数中调用了这个函数。最后，我们返回了一个对象，这个对象包含了当前路由对象中的完整路径、路由参数、查询参数等信息。

总结

useRouter 和 useRoute 是 Vue.js 3.2 中新增的两个用于路由管理的 Composition API。 useRouter 用于获取路由实例。而 useRoute 用于获取当前路由对象。使用这两个 API，我们可以更加方便地管理前端路由，提高开发效率。

参考文献

• Vue Router: Composition API
  https://next.router.vuejs.org/guide/advanced/composition-api.html。