【Vue】Vue 路由传参

最新推荐文章于 2024-05-16 23:40:36 发布
最新推荐文章于 2024-05-16 23:40:36 发布
阅读量775 收藏 6
点赞数 32
分类专栏： Web前端 文章标签： vue.js 前端 javascript 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74002634/article/details/135681153
版权

目录捏

前言

在这里插入图片描述

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 相关内容，敬请期待~

Hnhyyyy
关注
  • 32
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue路由传参 vue路由传参
11-18
vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参 vue路由传参
vue动态路由配置及路由传参的方式
12-10
　这就要用到动态路由跟路由传参了！ 首先我们来了解下router-link这个组件： 　简单来说，它是个导航器，利用to属性导航到目标组件，并且在渲染的时候会自动生成一个a标签，当然官方也有说明，加个tag标签属性就...
Vue3路由传参
qq_54334713的博客
09-06 1万+
Vue3路由传参
Vue路由传参三种方式
热门推荐
Senora的博客
07-19 3万+
1、params传参：通过params传递参数，如果我们想获取 id 的参数值，可以通过this.$route.params.id这种方式来打印出来就可以得到了； 2、路由属性配置传参：可以用this.$route.params.id来获取到 id 的值 3、query传参：可以解决页面刷新参数消失问题的，这种方式可以理解为是 ajax 中的 get 方法，参数是直接在 url 后面添加的，参数是可见的，所以解决页面刷新参数消失问题建议使用此方法来解决；...
vue2路由传参
meng0905521的博客
09-28 4723
更适合于编程小白；详细阐述vue2三种编程式传参方式的写法、以及注意事项。
Vue2 路由传参
helloworldcnm的博客
11-15 204
routet-link to="/name/参数名"></router-link>接收使用: $route.params.参数名。
vue3路由传参
2301_76423183的博客
12-28 471
之前试过其他的传参方法，不知道咋回事，就state不会失灵。
vue动态路由传参
weixin_52339077的博客
06-26 3817
vue动态路由传参
vue-router路由传参的三种方式
小小前端攻城狮的博客
04-04 5534
前言 我们在组件切换时经常会有传递一些数据的需求，这样就涉及到了路由传参的问题。 vue-router传递参数有两个大类：①编程式的导航router.push。②声明式的导航 <router-link> 编程式导航router.push 通过params属性传值-name //路由配置文件中 { path: '/detail', name: 'Detail', component: Detail } //跳转时页面 this.$router.push({
vue 路由跳转与传参
m0_46188775的博客
04-16 991
vue-router 路由传递参数
vue路由传参的三种方式
m0_72838183的博客
10-06 8685
vue路由的三种传参方式，常见的写法及其使用，供大家参考
【Vue3】路由传参的几种方式
owo_ovo的博客
02-19 3961
【Vue3】路由传参的几种方式
vue路由传参三种基本方式详解
10-15
主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue-router 路由传参用法实例分析
10-15
主要介绍了vue-router 路由传参用法,结合实例形式分析了vue-router 路由传参基本使用方法及操作注意事项,需要的朋友可以参考下
详解Vue中一种简易路由传参办法
08-29
本篇文章主要介绍了详解Vue中一种简易路由传参办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue3选项式和组合式生命周期说明
weixin_44072254的博客
05-16 383
setup -beforeCreate和created的统称，只在composition里面取消这两个，可以在这里进行数据请求。onUpdated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。updated-更新，可以获取到更新后的实例，避免在此期间更改数据，因为这可能会导致无限循环的更新。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。组件已被拆解，数据绑定被卸除，监听被移出，子实例也统统被销毁。beforeUpdate-更新前，可以在此更改数据。
前端Vue架构
weixin_45678402的博客
05-12 277
defineProperty：监听范围比较窄，只能通过属性描述符去监听已有属性的读取和赋值；兼容性较差，只能兼容支持ES6 的浏览器（要求监听数据是对象）这样写的话，依赖收集只能收集到属性c；如果访问的属性值还是一个对象，对属性值再次进行代理；创建视图的函数（render）和数据之间的关联；当数据发生变化的时候，希望render重新执行；下面的用法，只能收集到c，收集不到c1。依赖收集：a color: #f00。依赖收集：a color: #f00。如何知晓数据对应的函数；监听数据的读取和修改；
vue中的事件
最新发布
weixin_43390711的博客
05-16 46
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
Vue.js的发展史（一）
2301_79683791的博客
05-15 435
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
vue3 获取路由传参
09-02
在 Vue 3 中，可以使用 `route` 对象来获取路由传参。下面是获取路由传参的方法： 1. 在组件中引入 `useRoute` 方法： ```javascript import { useRoute } from 'vue-router';``` 2. 在组件中使用 `useRoute` 方法来获取 `route` 对象： ```javascript const route = useRoute(); ``` 3. 使用 `route` 对象的 `params` 属性来获取路由传参： ```javascript const paramValue = route.params.paramName; ``` 在上述代码中，`paramName` 是你定义的路由参数名称，`paramValue` 是对应的参数值。 注意：上述方法适用于使用 Vue Router 进行路由管理的情况。确保已经正确安装和配置了 Vue Router。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值