Vue.js3.2中UseRouter和UseRoute的用法详解

介绍

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

成都创新互联是一家专注于网站建设、成都网站设计与策划设计,犍为网站建设哪家好?成都创新互联做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:犍为等地区。犍为做网站价格咨询:028-86922220

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。

新闻标题：Vue.js3.2中UseRouter和UseRoute的用法详解
本文路径：http://www.shufengxianlan.com/qtweb/news6/522206.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联