标题 | 详情 |
---|---|
作者简介 | 愚公搬代码 |
头衔 | 华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。 |
近期荣誉 | 2022年度博客之星TOP2,2023年度博客之星TOP2,2022年华为云十佳博主,2023年华为云十佳博主,2024年华为云十佳博主等。 |
博客内容 | .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。 |
欢迎 | 👍点赞、✍评论、⭐收藏 |
文章目录
🚀前言
在单页面应用(SPA)的开发中,路由不仅仅是页面的导航工具,更是实现组件间数据传递的重要桥梁。Vue Router 作为 Vue.js 的官方路由管理器,提供了灵活的路由传参功能,使得开发者能够轻松地将数据从一个页面传递到另一个页面,增强了应用的交互性与用户体验。
本文将深入探讨 Vue Router 中的路由传参机制,包括动态路由参数和查询参数的使用。我们将详细讲解如何在路由中定义参数、如何在组件中获取这些参数,以及如何将参数传递给其他路由。通过具体的代码示例,我们将展示如何在实际开发中灵活运用路由传参,从而实现更复杂的页面交互和数据展示。
🚀一、Vue Router的路由传参
在过去,我们习惯使用 route.params
来获取路由传递的参数,尽管这种方式有效,但它让组件与路由配置紧密耦合,影响了组件的复用性。本节将探讨一种更为灵活的路由传参方式——使用属性的方式进行参数传递。
🔎1. 传统的参数获取方式
还记得我们编写的用户设置页面是如何获取路由传递的 id
参数的吗?代码如下:
<template>
<h1>用户设置</h1>
<h2>id: {{ $route.params.id }}</h2>
</template>
<script>
export default {
name: 'UserSetting'
}
</script>
由于在组件的模板内部直接使用了 $route
属性,这导致该组件的通用性大大降低。我们可以通过属性传递参数来增强组件的复用性。
🔎2. 使用属性传递参数
首先,将组件中所有耦合路由的部分去除掉,修改如下:
<script setup>
defineProps(['id'])
</script>
<template>
<h1>用户设置</h1>
<h2>id: {{ id }}</h2>
</template>
现在,UserSetting
组件能够通过外部传递的属性来实现内部逻辑。接下来,我们需要将路由的传参映射到外部属性上。
🔎3. 路由配置映射到属性
Vue Router 默认支持属性传递功能。在定义路由时,将 props
设置为 true
,则路由中传递的参数会自动映射到组件定义的外部属性。代码如下:
const routes = [
{
path: '/user/:id(\\d+)',
component: UserSetting,
props: true // 将路由参数映射为组件的 props
}
];
这样,路由参数会自动传递到 UserSetting
组件的 id
属性中。
高级配置
🦋3.1 命名视图中的属性传递
对于有多个页面出口的同级命名视图,我们需要对每个视图的 props
单独进行设置,示例如下:
const routes = [
{
path: '/home/:username/:id',
components: {
topBar: User,
default: UserSetting
},
props: {
topBar: true,
default: true
}
}
];
🦋3.2 使用对象传递静态属性
如果组件内部需要的参数与路由本身并没有直接关系,我们也可以将 props
设置为对象,此时 props
设置的数据将原样传递给组件的外部属性。例如:
const routes = [
{
path: '/user/:id(\\d+)',
component: UserSetting,
props: { id: '000' } // 固定传递 id 属性为 '000'
}
];
此时路由中的 id
参数将被弃用,组件中获取到的 id
属性值将固定为 “000”。
🦋3.3 使用函数动态传递属性
props
还有一种更便捷的使用方式,可以直接将其设置为一个函数,函数返回要传递到组件的外部属性对象,这种方式动态性很好,示例如下:
const routes = [
{
path: '/user/:id(\\d+)',
component: UserSetting,
props: route => {
return {
id: route.params.id,
other: 'other'
};
}
}
];
这种方式可以根据路由参数动态生成传递给组件的属性。
🔎4.总结
- 传统的参数获取方式:直接使用
$route.params
,会导致组件与路由耦合。 - 使用属性传递参数:通过
defineProps
和props
映射路由参数,使组件更加通用和可复用。 - 命名视图中的属性传递:对每个命名视图单独设置
props
。 - 使用对象传递静态属性:将静态数据传递给组件。
- 使用函数动态传递属性:根据路由参数动态生成传递给组件的属性。