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<br>https://next.router.vuejs.org/guide/advanced/composition-api.html