vue-router参数传递

最新推荐文章于 2024-12-12 17:17:57 发布
原创 最新推荐文章于 2024-12-12 17:17:57 发布 · 221 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #vue-router #参数传递 #路由

本文深入讲解Vue-router中参数传递的两种主要方式：params和query。详细介绍如何通过路由配置和JavaScript代码进行参数传递，以及如何利用this.$route在组件中获取这些参数。

vue-router参数传递

一、传递参数的方式

1.传递参数主要有两种类型: params和query

  • params的类型:
    • 配置路由格式: /router/:id
    • 传递的方式: 在path后面跟上对应的值
    • 传递后形成的路径: /router/123, /router/abc
  • query的类型:
    • 配置路由格式: /router, 也就是普通配置
    • 传递的方式: 对象中使用query的key作为传递方式
    • 传递后形成的路径: /router?id=123, /router?id=abc

2. 参数传递方式

  • 方式一：<router-link>
  • 方式二：JavaScript代码

3. 获取参数

  • 获取参数通过$route对象获取的.
    • 在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route ，并且当路由切换时，路由对象会被更新。
  • 通过$route获取传递的信息如下:

4. 界面展示

Vue系列：通过vue-router如何传递参数示例
08-31
下面将详细介绍如何通过 vue-router 实现参数传递。 首先，我们需要设置路由配置。在 `router.map()` 方法中，我们可以定义一个或多个路由规则。每个规则包含一个路径和对应的组件。在路径中，我们可以使用冒号（`:...
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
4. **Vue Router 4.x**：Vue Router 4.x 配置路由时，主要涉及`createRouter`和`createWebHistory`方法。路由定义包括 path、component、props、beforeEnter 等选项。还可以使用 `router-link` 和 `router-view` ...
vue router传值
u012536222的博客
09-26 181
方法1-传值 <router-link to="/home?id=11">Go to Bar</router-link> **取值方式** this.$route.query.id 方法2-传值 <router-link to="/home/参数1/参数2">Go to Bar</router-link> routes: [ { path: ‘/...
Vue-router 传值
u012967454的博客
02-13 368
1、 动态路由传值 &lt;router-link to='/xxx/数据值'&gt;&lt;/router-link&gt; 动态绑定值时&lt;router-link :to="'/xxx/'+变量"&gt;&lt;/router-link&gt; 1.配置动态路由 routes[ //动态路劲参数 以冒号开头 {path:’/user/:id’,component:User} ] 2...
vue-router 传值
大前端
08-26 332
query传值 直接在需要跳转的地址后面加上需要传递的参数 <router-link :to="`/info?id=${item.id}`">{{ item.name }} /router-link> 获取传递的参数 this.$route.query.id 动态路由(params传值) 定义动态路由 path:"/infos/:ids", 在地址后面加上参数 <router-link :to="`/infos/${item.id}`">{{ item
vue-router传值
Hhjian524的博客
04-07 250
1、编程式导航router.push 2、声明式的导航 <router-link> 编程式导航传递参数有两种类型：字符串、对象 字符串： this.$router.push("home"); 对象： this.$router.push({ name: 'news', params: { userId: 123 }}) //获取：this.$route.params.userId 查询参数其实就是在路由地址后面带上参数和传统的url参数一致，传递参数使用query而且必须配合path来传递参数
Vue 路由（vue-router）传值
日积月累
03-12 860
有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。 const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', component: User } ] })
使用vue-router在Vue页面之间传递数据的方法
10-16
1. 利用URL参数传递数据： URL参数通常用于传递那些需要在多个页面间保持的、且对页面访问具有关键意义的信息，比如用户的唯一标识。在vue-router中，可以通过定义带有参数的路由路径来实现这一点。在路由定义中...
基于vue-router 多级路由redirect 重定向的问题
10-18
当遇到重定向问题时，应根据具体情况分析可能的错误原因，如路径错误、参数传递不当等，并通过编程式导航或正确配置 :to 属性来解决问题。希望通过本文的介绍，可以帮助开发者在使用 vue-router 时更加高效地处理...
vue-router传递参数的几种方式实例详解
12-04
总结来说，Vue Router 提供了灵活的参数传递机制，包括命名路由和查询参数，以满足不同的需求。命名路由适用于不希望参数显示在 URL 查询字符串中的情况，而查询参数则适合那些需要在 URL 中保留的参数。无论选择哪...
Vue路由router之间传值
锦鲤(⑉°з°)--♡的博客
08-05 271
在Vue框架中，要实现显示不同的页面，首先要配置路由， vue-router路由的原理是通过改变网址，来实现页面的局部刷新，相比a标签跳转的不同之处在于，路由跳转不需要刷新整个页面。 这里主要讲述的是在Vue路由如何传递参数，相关路由配置这里不配置了，而在Vue框架中最常用的两种传值方法：query方式和params方式。 通过query方式传递参数： query方式是通过path：/blogD...
vue-router之路由传值
I`m a little coder
09-04 256
一、用name传递参数 1.在路由文件src/router/index.js里配置name属性。 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 routes: [   {   path: '/',   ...
vue路由传值
学思QAQ的博客
07-06 412
vue路由的理解
VueRouter如何传值
云散的博客
08-31 703
VueRouter如何传值给子路由
vue-router路由传参的两种方式（params 和 query ）
qq_38210427的博客
12-12 4349
A、vue 路由传参的使用场景一般应用在B、传参方式可划分为传参和传参；C、而 params 传参又可分为在中显示参数和不显示参数两种方式；D、即vue路由传参的三种方式：query传参（显示参数）、params传参（显示参数）、params传参（不显示参数）A、点击列表详情，跳转到详情内页，传递id参数获取详情数据。B、在输入框输入内容后，点击搜索，跳转到搜索页面，并把输入的内容一起带到搜索页面。
【vuejs】vue-router 路由跳转参数传递详解和应用场景及技巧
工作的日常记录和平凡的生活分享
07-03 5171
路由定义是Vue Router中实现页面路由跳转的基础。在Vue2中，路由的定义通常在应用的入口文件或路由配置文件中进行。路由定义涉及到路径模式（path）、视图组件（component）以及一些高级配置，如命名视图、重定向、别名等。 - 路由模式：路由的路径模式定义了URL的路径与组件的映射关系。例如，`{ path: '/user/:id', component: User }` 表示当URL匹配到 `/user/:id` 时，将渲染 `User` 组件，其中 `:id` 是一个动态参数。 - 组件映
Vue-router传递参数的4种方式 (十)
weixin_46022934的博客
12-11 1700
1.路由的url传值 2.友好url传值(params传值) 3.命名路由传值 4.js传值
vue-router传递参数方式详解
程序源的博客
05-16 718
在开发项目中遇到需要携带参数跳转页面的需求，来记个笔记 方法1.(params传值) 以下是主页面跳转方法 toEditInfo() { this.$router.push({ path: '/XXX/XXX', params:{ edit:true } }); } 以下是目标页面方法 created(){ this.editStatus = this.$route.query.params;
vue-router 传值的三种方式
热门推荐
bubbleSweet的博客
06-15 1万+
上次被问到路由之间如何传值，我一整个蒙住，但其实在项目中也有用到过，所以今天把这些方法整理出来，以后便于翻阅 1. query 传值 在主页面中写一个按钮，绑定方法 <button @click="sentMesg()">兄弟页面</button> 通过 path 来连接和组件页面 brother 之间的关系 sentMesg(){ this.$router.push({ path:'/brother', query: { .
vue-router back传递参数
最新发布
03-28
### 使用 `vue-router` 的 `back()` 方法传递参数 在 Vue.js 中，`vue-router` 提供了导航功能，允许开发者通过编程方式进行页面跳转。然而，`router.back()` 是一种模拟浏览器返回按钮的行为，它本质上不会携带额外的参数[^1]。 尽管如此，在实际开发中仍然有几种变通的方式可以在使用 `back()` 返回上一页时传递数据： #### 1. **利用 Vuex 或全局状态管理** 如果项目中有 Vuex 状态管理工具，则可以通过将需要的数据存储到 Vuex store 中来实现跨页通信。当用户点击返回按钮时，可以从 Vuex 获取之前保存的状态。 ```javascript // 存储数据到 Vuex this.$store.commit('setData', { key: 'value' }); // 在目标组件中读取数据 const data = this.$store.state.data; ``` 这种方式不依赖于路由本身的功能，而是借助外部机制完成数据共享[^3]。 #### 2. **使用 SessionStorage/LocalStorage** 另一种常见的做法是把临时性的数据存入浏览器本地缓存（SessionStorage），这样即使刷新页面也能保留这些信息直到会话结束为止。 ```javascript // 设置 session 数据 sessionStorage.setItem('returnData', JSON.stringify({ key: 'value' })); // 取得 session 数据 const storedData = sessionStorage.getItem('returnData'); if (storedData) { const parsedData = JSON.parse(storedData); } ``` 这种方法简单易行，适合少量短期存在的变量交换需求[^2]。 #### 3. **自定义事件总线(Event Bus)** 创建一个独立的对象作为消息中心用于广播通知其他模块接收特定类型的更新信号连同附加负载一起发送出去；或者采用现代框架内置的支持如Vue实例充当中介角色处理此类事务。 ```javascript // 定义 event bus export const EventBus = new Vue(); // 发送事件 EventBus.$emit('send-data-back', { key: 'value' }); // 接收事件 EventBus.$on('send-data-back', function(data){ console.log(data); // 输出 {key:'value'} }); ``` 此方案适用于松耦合架构下的微服务之间通讯场景下较为理想的选择之一. 需要注意的是以上三种解决方案均绕过了标准意义上的query string或path-based routing parameters设计模式,因此可能不符合某些严格遵循RESTful API原则的应用程序的要求. ### 结论 综上所述,vue-router 并未直接支持带参形式调用 back() 函数操作历史记录栈的同时附加上新的查询条件等功能特性.但是我们能够灵活运用诸如 vuex ,local/session storage 和 custom events buses 这些技术手段达成相似目的即满足业务逻辑层面的需求同时也保持良好的用户体验一致性.[^1] ```python # 示例代码片段展示如何结合Vuex与Router Back配合工作 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state:{ sharedParam:null, }, mutations:{ setSharedParam(state,paramValue){ state.sharedParam=paramValue; } } }) function navigateBackWithParameter(paramToPass){ store.commit('setSharedParam', paramToPass ); router.back(); } navigateBackWithParameter("exampleValue"); console.log(store.getters['sharedParam']); //"exampleValue" ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值