vue页面跳转简单的传参方式

最新推荐文章于 2025-10-12 23:30:11 发布
最新推荐文章于 2025-10-12 23:30:11 发布
阅读量1.3k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mo3408/article/details/81491016
本文介绍了Vue中进行页面跳转并传递参数的几种方法，包括通过绑定:href的a标签传参，尤其在v-for循环中的使用，以及使用window.open跳转并传递参数。另外，还提到了Vue的路由方式，通过建立router/index.js或引入router.js来实现页面间的参数传递。

利用绑定:href给a标签，将值传给href,如果是使用v-for里循环的值，格式为字符串+值（记得不要加{{}}）

也可以使用window.open跳转传参，另个页面使用search方法接收数据

vue的路由方法也可以，建立文件夹router/index.js或者引入router.js(架构版)

开发版和生产版是没有的

vue3路由跳转传参方式
qq_55545630的博客
03-01 3813
我先简述一下我为啥推荐暴露传参而不推荐隐蔽传参。首先，虽然history API能解决刷新页面丢失数据的情况，但仅限于当前tab页，因为参数是保存到当前tab页的history中。所以会有一个神奇的现象，那就是你复制了当前的url，想打开一个新tab页，然后发现没有参数了。其次，也算是我的一个疑问，希望能蹲到一个大佬为我指点一下迷津。我一直不理解前端跳转页面，为啥传个参数还要遮遮掩掩的，感觉也就传个id啥的就够了，其他信息直接到新页面拉接口获取不就行了，也不涉及什么敏感信息的。
uniapp——uniapp3.0+vue3 页面跳转传参
qq_43201350的博客
08-19 718
uniapp——uniapp3.0+vue3 页面跳转传参
Vue 页面跳转传值/取值
little_pink_yo的博客
06-14 1万+
方法一：运用JS方法传递，this.$router.push({name:'测试页面',params:{'属性名':'属性值'}});这里的name 是要传递到某个页面上的页面名称。方法二：运用vue的属性方法传递，:to="{name:'测试页面',params:{''属性名:'属性值'}}" （name同上）注：使用 :to 传值，需要在URL中配置相应的属性名，如 '测试页面'的 path ...
vue中页面跳转，如何传递参数，多模块之间如何传参数有几种方式：
qq_43631129的博客
09-03 401
minxin — 缺点：每次页面进入都会初始化，跟当前页面的生命周期绑定。localStorage—本地存储–每次取完都清空，也不需要响应式。vuex–缺点：传一个字段不值当，刷新一下数据丢失。eventBus—页面使用这种方式太多，不方便维护。query—缺点：地址栏中20个参数，不美观.优点：多页面公用一套逻辑代码。优点：页面刷新数据还存在。优点：数据实时响应，
【Vue实现跳转页面】功能 - 总结。
最新发布
pWI_8wqo的博客
10-12 474
在Vue应用中，页面跳转是常见的功能需求。可以通过多种方式实现，包括使用vue-router、编程式导航、原生JavaScript等。以下详细介绍几种常见方法及其代码示例。
Vue页面跳转传递参数及接收方式
11-19
最近接触了vue项目，这里记录一下vue跳转到下一页面携带参数的两种方式。 典型应用场景：列表页跳转到详情页 一、配置路由 文件路径：src/router/config.php import Vue from 'vue' import Router from 'vue-router' import classify from '.././components/classify/classify.vue' import classifyChild from '.././components/classify/classifyChild.vue' export default new Route
Vue界面跳转传递参数
m0_62990162的博客
11-02 4912
vue页面跳转传参
xcxcsdn的博客
01-28 1169
需求场景：搜索时点击搜索按钮跳转到搜索页面并带搜索关键字。如下图： 方式1：字符串传参： 1.params传参：不带问号，地址栏占位。 先在路由配置如下： { path:'/search/:keyword', component:Search, meta:{footShow:true} }, 页面如下： <div class="searchArea"> <for.
精选资源
Vue路由的跳转和传参
06-22
Vue路由跳转的两种方式、路由传参的两种方式
vue路由对不同界面进行传参及跳转的总结
10-17
总结来说，Vue Router 提供了灵活的页面跳转和参数传递机制。开发者可以根据实际需求选择使用 `query`、`params` 或结合服务器请求来实现安全、稳定的数据传输。理解并熟练运用这些方法，将有助于构建高效、可维护的...
Vue页面跳转传参
XXX51129的博客
04-26 9572
在有些时候，我们需要跳转到其他页面，但是没有接口将相应的数据传过去，需要前端自己将数据传到另一个页面，那这样的情况怎么做呢？
谈谈Vue路由传参
why404
05-03 1768
一、使用router-link进行路由导航，传递参数 父组件中：使用<router-link to="/需要跳转的路由路径/需要传递的参数"></router-link>标签进行导航 child是子页面路由路径，123是需要传递的参数 子组件中：使用this.$route.params.num来接收路由参数 此时，页面上渲染出路由传递过来的参数num，呈现...
vue 页面之间跳转传参
no_have_name_的博客
11-19 432
vue 页面之间跳转传参 目的：vue各个页面之间的跳转的同时，传递页面之间的参数。 没有废话，直接上代码。 发送参数 // An highlighted block methods: { gohello() { this.$router.push({ path: "/" }); }, goopen() { ...
Vue路由/页面跳转传参的四种方式
漫漫漫漫的博客
03-27 9036
Vue路由传参/页面跳转传参常用的几种方式
VUE 页面传参、页面跳转
暂无内容
07-14 3030
VUE 页面传参、页面跳转； router参数传递； router.push（前端页面跳转）； router-link（后端代码跳转）；
Vue页面传参
涂山山主的博客
08-29 469
Vue页面传递参数 发送页面组合参数（接收地址，接收参数）： renderHDBPDF(dyhzbmogoid) { this.$router.push({path: "/unqualified-after", query: {dyhzbmogoid: dyhzbmogoid, filetype: "hdb"}}) } 接收页面拿去参数 const {dyhzbmogoid, gzsmogoid, filetype} = this.$route.query console.log(dyhzbmo
Vue Router 学习 页面跳转以及传参
卡尔特斯
09-28 61
跳转页面传递数据 router-link 方式: ○ Home.vue： <template> <div> <router-link to="/detail/123">跳转详情页</router-link> </div> </template> ○ index.js 或 router...
vue2页面跳转带值传参
热门推荐
CrazBarry的博客
08-04 1万+
//列表页 toDetail: function(e) { var self = this; var autoID = $(e.currentTarget).attr('data-id'); self.$router.push({path:"/friend-detail?userid="+autoID); // 对象 this.$router.push({path: '/logi...
vue3 页面跳转传参
07-12
<think>我们正在讨论Vue3中通过路由进行页面跳转并传递参数的方法。根据引用内容，我们可以总结出几种常见的方式： 1. 通过params传递参数（需要提前在路由规则中定义，或者使用命名路由） 2. 通过query传递参数（会显示在URL的查询字符串中） 注意：在Vue Router中，params和query是两种不同的传参方式。 具体步骤： 1. 在路由规则中定义参数（如果需要使用params） 2. 在源页面使用`router.push`进行跳转并传递参数 3. 在目标页面获取参数 下面分别说明： 方法一：使用params传参（适合传递不会在URL中直接显示的参数，但注意：如果使用path跳转，params会被忽略） 示例代码（源页面）： ```javascript import { useRouter } from 'vue-router' export default { setup() { const router = useRouter() function goToProductUpdate(id) { // 使用命名路由，并传递params router.push({ name: 'product_update', // 注意：这里使用name，不能使用path，因为params需要和命名路由一起使用 params: { id: id } }) } return { goToProductUpdate } } } ``` 在路由规则中，我们需要为这个路由命名，并且定义参数（例如，在router/index.js中）： ```javascript const routes = [ // ...其他路由 { path: '/product/update/:id?', // 这里:id表示参数，?表示可选 name: 'product_update', component: () => import('@/views/ProductUpdate.vue') } ] ``` 在目标页面（ProductUpdate.vue）中获取参数： ```javascript import { useRoute } from 'vue-router' import { onMounted } from 'vue' export default { setup() { const route = useRoute() // 通过route.params获取参数 const id = route.params.id onMounted(() => { console.log('接收到的参数id:', id) }) return { id } } } ``` 方法二：使用query传参（参数会显示在URL中，例如：/product/update?id=123） 示例代码（源页面）： ```javascript router.push({ path: '/product/update', // 也可以使用name: 'product_update'，但注意此时path中不需要写参数 query: { id: id } }) ``` 在目标页面获取query参数： ```javascript const route = useRoute() const id = route.query.id ``` 方法三：通过router-link标签传递参数（较少使用，因为通常我们通过方法触发跳转） 示例： ```html <router-link :to="{ name: 'product_update', params: { id: 123 } }">更新产品</router-link> 或 <router-link :to="{ path: '/product/update', query: { id: 123 } }">更新产品</router-link> ``` 注意事项： - 使用params传参时，如果路由规则中参数是可选的（即使用了?），那么传递参数时可能不会显示在URL中，但刷新页面后参数会丢失（因为params参数不会持久化到URL中，除非你已经在路由规则中定义）。因此，对于需要刷新页面后仍然保留的参数，建议使用query传参，或者将参数作为路径的一部分（即定义在path中）。 - 在Vue3中，使用组合式API（setup）时，我们使用`useRouter()`获取路由实例（用于跳转），使用`useRoute()`获取当前路由信息（用于获取参数）。 总结： 1. 需要隐藏参数且不希望参数出现在URL中，可以使用params，但注意刷新页面会丢失（除非使用其他方式持久化，如本地存储）。 2. 需要参数在URL中可见，以便分享或刷新后仍然存在，使用query。 根据引用[3]中的示例，我们也可以混合使用params和query，但通常不建议，因为容易混淆。 因此，在Vue3中，通过路由跳转传递参数主要使用`router.push`方法，并传入一个对象，对象中可以包含`name`（或`path`）、`params`或`query`。 下面是一个完整的示例： 步骤1：定义路由（router/index.js） ```javascript import { createRouter, createWebHistory } from 'vue-router' const routes = [ // ...其他路由 { path: '/product/update/:id', name: 'product_update', component: () => import('../views/ProductUpdate.vue') }, { path: '/product/detail', name: 'product_detail', component: () => import('../views/ProductDetail.vue') } ] const router = createRouter({ history: createWebHistory(), routes }) export default router ``` 步骤2：在源页面传递参数 示例1：使用params（需要匹配路由中的参数） ```javascript // 跳转到/product/update/123 router.push({ name: 'product_update', params: { id: 123 } }) // 或者使用path（需要完整路径并包含参数） // router.push({ path: `/product/update/${123}` }) ``` 示例2：使用query（跳转到/product/detail?id=123） ```javascript router.push({ name: 'product_detail', query: { id: 123 } }) // 或者 // router.push({ path: '/product/detail', query: { id: 123 } }) ``` 步骤3：在目标页面获取参数 对于params参数： ```javascript const route = useRoute() const id = route.params.id // 注意：这里id是字符串，如果需要数字，可以转换 ``` 对于query参数： ```javascript const route = useRoute() const id = route.query.id ``` 这样，我们就实现了在Vue3中页面跳转并传递参数的功能。 §§相关问题§§ 1. Vue3中路由参数传递有哪几种方式？它们有什么区别？ 2. 在Vue3中，如何获取路由传递过来的参数？ 3. 使用params传参时，为什么有时候刷新页面参数会丢失？如何解决？ 4. 在Vue3中，如何通过编程式导航实现页面跳转并传递参数？ 5. 路由跳转时，params和query可以同时使用吗？会有什么问题？</think>在 Vue 3 中，通过 Vue Router 实现页面跳转并传递参数主要有两种方式：**params 传参**和**query 传参**。以下是具体实现方法： --- ### 🛣️ 一、params 传参（参数在 URL 路径中） **特点**：参数在 URL 中显示为路径的一部分（如 `/user/123`），需提前在路由规则中定义参数名。 #### 1. 定义路由规则（router/index.js） ```javascript const routes = [ { path: '/user/:id', // 定义参数 :id name: 'userDetail', // 命名路由（推荐） component: () => import('@/views/UserDetail.vue') } ]; ``` #### 2. 源页面跳转并传参 ```javascript import { useRouter } from 'vue-router'; // 方法1：通过命名路由 + params router.push({ name: 'userDetail', // 使用路由名称 params: { id: 123 } // 传递参数 }); // 方法2：直接写路径（不推荐，易出错） router.push(`/user/${123}`); ``` #### 3. 目标页面接收参数 ```javascript import { useRoute } from 'vue-router'; const route = useRoute(); const userId = route.params.id; // 获取参数 → 123 ``` --- ### 🔍 二、query 传参（参数在 URL 查询字符串中） **特点**：参数在 URL 中以 `?key=value` 形式显示（如 `/user?id=123`），无需提前定义路由参数。 #### 1. 源页面跳转并传参 ```javascript // 方法1：通过 path + query router.push({ path: '/user', query: { id: 123, name: 'John' } // 传递多个参数 }); // 方法2：通过命名路由 + query router.push({ name: 'userDetail', query: { id: 123 } }); ``` #### 2. 目标页面接收参数 ```javascript const route = useRoute(); const userId = route.query.id; // → "123" const userName = route.query.name; // → "John" ``` --- ### 📌 关键区别与注意事项 | **特性** | **params** | **query** | |----------------|--------------------------------|--------------------------------| | **URL 显示** | `/user/123` | `/user?id=123` | | **路由定义** | 需提前声明（如 `path: '/user/:id'`） | 无需声明 | | **参数获取** | `route.params.id` | `route.query.id` | | **刷新页面** | 参数保留 | 参数保留 | | **适用场景** | 必传参数（如资源ID） | 可选参数（如搜索条件） | #### ⚠️ 重要提醒： 1. **params 必须使用 `name` 跳转**： 若使用 `path` 跳转（如 `router.push({ path: '/user', params: { id: 123 } })`），params 参数会失效！ 2. **参数类型**： `route.params` 和 `route.query` 返回的值均为**字符串**，需自行转换类型（如 `Number(id)`）。 --- ### 🌰 完整示例 #### 源页面（跳转逻辑） ```vue <script setup> import { useRouter } from 'vue-router'; const router = useRouter(); // params 传参跳转 const goWithParams = () => { router.push({ name: 'userDetail', params: { id: 456 } }); }; // query 传参跳转 const goWithQuery = () => { router.push({ path: '/user', query: { id: 789, from: 'home' } }); }; </script> ``` #### 目标页面（接收参数） ```vue <script setup> import { useRoute } from 'vue-router'; const route = useRoute(); // 接收 params 参数 const paramsId = route.params.id; // 接收 query 参数 const queryId = route.query.id; const fromPage = route.query.from; </script> ``` --- ### 📚 官方参考 - [Vue Router 编程式导航](https://next.router.vuejs.org/guide/essentials/navigation.html) - [路由传参文档](https://next.router.vuejs.org/guide/essentials/passing-props.html) 通过合理选择 `params` 或 `query`，即可灵活实现 Vue 3 中的页面跳转传参需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

瑆箫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值