【Vue】Vue 路由传参

发布时间：2024年01月19日

目录捏

前言

在这里插入图片描述

Vue 路由是 Vue 中一个非常重要的概念，它允许你在应用程序中创建多个页面并在这些页面之间进行导航。上一篇文章介绍了 Vue 路由的配置及使用 ，相信大家对路由都有了大致的了解，本文将围绕路由继续对路由传参进行介绍。

Vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转。传参方式可划分为 query 传参及 params 传参，而两种传参方式又分别包含 声明式 与 编程式 两种方式，下面会通过示例带大家一步一步了解。

一、query 传参

1.声明式

a. to的字符串写法

在这里插入图片描述

b. to的对象写法

在这里插入图片描述

示例：

在这里插入图片描述

在这里插入图片描述

2.编程式

在这里插入图片描述

a. this.$router.push

在这里插入图片描述

b. this.$router.replace

在这里插入图片描述

示例a：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

示例b：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

二、params 传参

1.声明式

a. to的字符串写法

在这里插入图片描述

在这里插入图片描述

b. to的对象写法

在这里插入图片描述

2.编程式

在这里插入图片描述

a. this.$router.push

在这里插入图片描述

b. this.$router.replace

在这里插入图片描述

示例与上文 query 传参相同，不再进行赘述

总结

以上即为对 路由传参 的相关介绍，相信大家也都对路由有了更进一步的了解。路由是 Vue 中的核心内容，任何项目都离不开路由，之后也将会给大家带来 路由守卫 等其他 Vue 相关内容，敬请期待~

文章来源:https://blog.csdn.net/m0_74002634/article/details/135681153
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章