日期:2024年8月21日
作者:Commas
签名:(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释:如果您觉在这里插入代码片
得有所帮助
,帮忙点个赞
,也可以关注我
,我们一起成长;如果有不对的地方,还望各位大佬不吝赐教,谢谢^ - ^
1.01365 = 37.7834;0.99365 = 0.0255
1.02365 = 1377.4083;0.98365 = 0.0006
说在最前面:本文
vue3
的示例代码,在没有另外声名的情况下,均采用<script setup>
组合式代码风格,风格统一,避免混乱,请各位新老食客放心食用哈 ^ _ ^
一、前言
在 Vue3
中,组合式 API
(Composition API
)提供了一种更加灵活和直观的方式来组织和复用逻辑。其中,useRoute
是 Vue Router 4
中的一个强大工具,它允许我们在 setup
函数、语法糖中轻松访问当前路由的信息。本文将详细介绍 useRoute
的用法、属性和方法,并通过实例展示如何在实际项目中应用它。
二、useRoute 的前世今生?
在 Vue2
中,我们通过 this.$route
来访问路由信息,但到了 Vue3
,Composition API
的出现使得我们有了更加现代的解决方案 —— useRoute
。
useRoute
是 Vue Router4
(适用于 Vue3
)中的一个 Composition API
函数。它提供了一种简洁的方式来访问当前激活路由的状态,包括路径、参数、查询参数等,更符合组合式 API
的方式,提供了一个响应式的 route
对象,使得数据操作更加直观和高效。
另外,通过 useRoute
,我们可以避免在组件中直接访问全局的 $route
对象,从而使代码更加模块化和可维护。
三、useRoute
的属性
当我们在组件的 setup
函数中调用 useRoute
时,它会返回一个响应式的 route
对象。这个对象包含了当前路由的各种信息,如路径、名称、参数、查询参数等。
path
:当前路由的路径,如 /about。params
:对象,当前路由的参数,例如 { id: ‘123’ }。query
:对象,当前路由的查询参数,如 { sort: ‘newest’ }。fullPath
:当前路由的完整路径,包括查询参数。meta
:对象,当前路由的元信息。name
:当前路由的名称,如果有的话。hash
:当前路由的哈希值(带#
)。matched
:数组,当前路由匹配的路径段的路由记录。
三、实战应用:使用 useRoute 获取路由信息
在 Vue3
组件的 <script setup>
标签中,使用 useRoute
变得异常简单:
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.path); // 输出当前路径
console.log(route.params); // 输出当前路由参数
console.log(route.query); // 输出当前路由查询参数
</script>
示例:动态路由与查询参数
假设我们有这样一个路由配置:
const routes = [
{
path: '/user/:id',
name: 'user',
component: UserComponent,
// 更多路由配置...
},
// 更多路由配置...
];
在 UserComponent
组件中,我们可以通过 useRoute
来访问动态参数和查询参数:
<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
// 动态输出用户 ID
const userId = route.params.id;
console.log("userId:", userId);
// 后续逻辑代码省略...
</script>
通过上述代码,你将能够轻松获取和利用动态参数 :id
的值,从而实现动态渲染组件内容或执行相应逻
更多传参相关知识,可看我的另一篇博客《Vue-Router路由的三种传参方式》
四、结语
useRoute
的出现,不仅简化了我们在 Vue3
中获取和操作当前路由信息的过程,还使得代码变得更加响应式和可维护。掌握 useRoute
,你就能在 Vue3
的项目中更加得心应手地处理动态路由,实现更加灵活和高效的应用开发。
参考文章:
版权声明:本文为博主原创文章,如需转载,请给出:
原文链接:https://blog.csdn.net/qq_35844043/article/details/141390994