(汇总)vue中在不同页面之间-4种传递参数的方式

已于 2024-04-29 16:08:33 修改
阅读量432 收藏 3
点赞数 4
分类专栏： 前端 文章标签： vue.js 前端 javascript
于 2024-04-29 16:06:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lalala8866/article/details/138316389
版权

Vue项目页面间传递参数和参数存储有很多种，常见的： （参考链接：www.qinglite.cn/doc/4603647…

  • url里加参数，比如：/find?id=xxx，或/find/xxx，适合少量数据，优点是刷新页面也不会丢
  • 使用vuex组件，优点是全局，响应式（很大的一个优点），缺点是刷新就没了
  • 使用h5 localStorage或sessionStorage，优点是全局，刷新也不会丢，可存大量数据，缺点是没有响应式
  • 使用事件总线，A组件触发事件，B组件接受事件，可带上参数进行传递，优点是全局，跨组件，缺点是用得多了，代码不好维护。

一般Vue项目的全局参数可使用vuex+sessionStorage，发挥两者的优点：全局、刷新不丢。

简而言之4种：路由、存储、事件总线、vuex

程序员大侠
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-router传递参数的几种方式实例详解
12-04
vue-router传递参数分为两大类 编程式的导航 router.push 声明式的导航 <router> 编程式的导航 router.push 编程式导航传递参数有两种类型：字符串、对象。 字符串 字符串的方式是直接将路由地址以字符串的方式来跳转，这种方式很简单但是不能传递参数： this.$router.push("home"); 对象 想要传递参数主要就是以对象的方式来写，分为两种方式：命名路由、查询参数，下面分别说明两种方式的用法和注意事项。 命名路由 命名路由的前提就是在注册路由的地方需要给路由命名如： 命名路由传递参数需要使用params来传递，这里一定要注
vue面试题汇总.zip
02-03
- Vuex是Vue的状态管理模式，它集中管理应用的所有组件的状态，提供了一种统一的方式来读取和修改状态。 - Vuex的核心概念包括store、state、mutations、actions和getters。 6. **虚拟DOM**： - Vue利用虚拟DOM...
VUE跨页面传值的精妙
程序大视界
07-11 2914
背景 众所周知，以前开发者只要掌握HTML、CSS、JavaScript三驾马车就能胜任一份Web前端的工作。而在技术日新月异的现在，Vue, React，Angular在代替旧的前端框架已经是大势所趋了。 一、vue简介 Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。.
vue页面之间传值
RemindingMe的博客
05-14 166
1.点击事件,A页面。2.接收页面 B页面。
vue页面间参数传递的方法总结
热门推荐
我的E家
11-20 1万+
目录   方法一：通过路由带参数进行传值 方法二：通过设置 Session Storage/local Storage缓存的形式进行传递 1、 原生用法使用 2、 对Session Storage/local Storage缓存进行统一封装 方法三：父子组件之间的传值(通过props属性) 1、父组件给子组件传值 2、子组件给父组件传值(通过emit事件) 方法四：不同组件之间传...
详解vuejs几种不同组件（页面）间传值的方式
12-12
在应用复杂时，推荐使用vue官网推荐的vuex，以下讨论简单SPA中的组件间传值。 一、路由传值 路由对象如下图所示： 在跳转页面的时候，在js代码中的操作如下，在标签中使用标签 this.$router.push({ name: 'routePage', query/params: { routeParams: params } }) 需要注意的是，实用params去传值的时候，在页面刷新时，参数会消失，用query则不会有这个问题。 这样使用
谈谈Vue路由传参
why404
05-03 1556
一、使用router-link进行路由导航，传递参数 父组件中：使用<router-link to="/需要跳转的路由路径/需要传递的参数"></router-link>标签进行导航 child是子页面路由路径，123是需要传递的参数 子组件中：使用this.$route.params.num来接收路由参数 此时，页面上渲染出路由传递过来的参数num，呈现...
vue怎么跨页面传参
zzx262625的博客
12-31 833
如果需要在多个页面之间传递复杂的数据或共享状态，可以使用路由状态管理。在Vue中，可以使用Vuex来实现路由状态管理。在Vue Router中，可以通过路由参数来传递数据。在定义路由时，可以使用动态路由参数来接收参数值，在组件中通过。以上是在Vue中实现跨页面传参的两种常用方法：路由参数和路由状态管理。选择哪种方法取决于具体的需求和场景。在Vue中，可以使用路由参数和路由状态管理来实现跨页面传参。来获取从组件A传递过来的数据。在组件B中，可以通过。
vue项目开发中页面之间传递参数的方法
小小·程序媛
05-14 8194
vue中几种参数传递的方法 #1.编程式导航（router.push） ##1.1.命名路由（params） ##1.2.查询路由（query） #2.声明式导航 ##2.1.命名路由（params） ##2.2.查询路由（query） #1.编程式导航 使用方法：this.$router.push() 如果里边放的是字符串，直接跳到对应的路径 eg:this.$router.push("/Login")会直接跳到Login页面，这时候并不传递参数 1.1.命名路由传递参数 使用方法： //这里通过传一个对
vue router页面跳转及传参、Vue获取用户输入到页面的数据在另一个页面使用
m0_61663332的博客
12-28 4111
vue router页面跳转及传参、Vue获取用户输入到页面的数据在另一个页面使用通过路由传参拿到跳转前页面数据并在页面使用传来的数据 使用场景：用户在充值页面输入的账号和充值金额，跳转到充值成功页面展示数据！
vue面试题+web前端笔试题面试题汇总+前端优化总结+《Vue-框架开发》真题
最新发布
06-20
- 路由管理：Vue Router提供单页面应用的路由管理，实现页面跳转和参数传递。 - 组件间通信：使用props、事件、Vuex等方式进行组件间的数据传递。 - 自定义指令：扩展Vue的功能，创建自定义的指令如`v-focus`。 ...
vue面试题汇总 ，包含答案
11-27
Props 是一种父组件向子组件传递参数的方式，$emit 是一种子组件向父组件传递参数的方式，$on 是一种父组件监听子组件事件的方式。 10.Vue 的路由实现：hash 模式 和 history 模式 Vue 的路由实现可以使用 hash ...
2023Vue前端面试题汇总
02-16
2023年的Vue前端面试题汇总反映了当前业界对Vue技能的需求和关注点。以下是对这些面试题相关知识点的详细说明： 1. **Vue基础知识** - **Vue实例**：Vue实例是Vue的核心，它包含了Vue对象的所有功能。你可以通过`...
Vue面试题汇总最新版
06-06
Vue 面试题汇总最新版 ...子组件通过$emit 方法传递参数 `<template> <div v-on:click="events"></div> </template> <script> //引入子组件 import Main form "./main" export default{ ... } </script>`
关于vue面试题汇总
08-27
2. **Vue组件之间的通信**：Vue组件间的通信可以通过props、事件（$emit和$v-on）、Vuex状态管理、提供者/注入（provide/inject）以及非父子组件间通信的Bus（事件总线）等方式实现。 3. **JS中判断数据类型的方法*...
vue学习代码汇总
07-11
- **Vue Router**：Vue官方推荐的路由库，用于管理应用的路由，实现页面跳转和参数传递。 - **路由懒加载**：按需加载组件，提高应用性能。 - **命名视图和嵌套路由**：用于创建复杂的路由结构，如并行视图和子...
【vue】通过Vuex传递数据
Evan_QB的博客
08-02 5480
Vuex是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 如图所示： Vue Components可通过State来获取公共数据 如果需要修改数据的话，需要经过:  Actions以及Mutations来进行修改 下面我们使用实例测试一下: 首先我们安装Vuex ...
VUE传入参数到另一个页面
Max_Tsui的博客
01-21 7278
接收参数的页面 <template> <div> <b>经度：{{jingDu}}</b> <b>纬度：{{weiDu}} </b> <b>地点 {{address}}</b> </div> </template> <script> export default{ created() { this.getParam(); }
Vue中不同页面之间如何传递参数？
Alan_Walker688的博客
02-25 2149
Vue中不同页面之间传递参数的解决方法
vue-router4 传递参数
12-03
在Vue Router 4中，传递参数有两种方式：编程式导航和声明式导航。 1. 编程式导航 使用编程式导航时，可以使用`params`或`query`来传递参数。`params`用于传递动态路由参数，`query`用于传递查询参数。 （1）传递动态路由参数 ```javascript // 路由配置 const routes = [ { path: '/user/:id', name: 'User', component: User } ] // 传递参数 router.push({ name: 'User', params: { id: 123 }}) ``` （2）传递查询参数 ```javascript // 路由配置 const routes = [ { path: '/user', name: 'User', component: User } ] // 传递参数 router.push({ name: 'User', query: { name: 'search', age: 18 }}) ``` 2. 声明式导航 使用声明式导航时，可以在`<router-link>`标签中使用`to`属性来传递参数。`params`用于传递动态路由参数，`query`用于传递查询参数。 （1）传递动态路由参数 ```html <!-- 模板 --> <router-link :to="{ name: 'User', params: { id: 123 }}">User</router-link> <!-- 路由配置 --> const routes = [ { path: '/user/:id', name: 'User', component: User } ] ``` （2）传递查询参数 ```html <!-- 模板 --> <router-link :to="{ name: 'User', query: { name: 'search', age: 18 }}">User</router-link> <!-- 路由配置 --> const routes = [ { path: '/user', name: 'User', component: User } ] ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值