记录前端的摸索--Vue3的带参数页面跳转

最新推荐文章于 2024-07-17 20:15:37 发布
最新推荐文章于 2024-07-17 20:15:37 发布
阅读量987 收藏 1
点赞数 1
文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44627822/article/details/128535271
版权

Vue3的带参数页面跳转

在这里插入图片描述

在这里插入图片描述
先是加一个按钮，然后使用router全局路由去做带参数页面跳转，先在router的index.js文件里先要配置需要跳转的页面信息：
在这里插入图片描述
按照定义好的name属性来定位跳转（之前用的是path老是无法传参说undefined，但是能跳转），带上params参数传递。
在这里插入图片描述
在另一个页面直接使用OnMounted方法，渲染完就马上执行，使用route当前页面的路由去获取之前传来的参数。
在这里插入图片描述
就能实现带参的页面跳转拉

化尘埃
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3 路由跳转携带参数
weixin_50556190的博客
04-12 1834
这种写法防止url地址携带 多选的大量数据。
Vue3.0路由跳转携带参数
renfeideboke的博客
02-20 6656
路由跳转携带参数
Vue3 快速入门 (四) : 使用路由实现页面跳转
最新发布
朱豪凯的博客
07-17 2011
介绍在Vue3中，如何使用路由实现页面的跳转
前端路由跳转和传参的几种方式
m0_72167535的博客
11-19 3466
前端路由跳转和传参的几种方式
路由跳转和传参(vue3)
m0_59680972的博客
03-03 9507
路由跳转和传参（vue3+Ts+setup)
vue3 页面跳转 页面数据保留
qq_45118325的博客
07-27 2348
vue3 页面跳转 页面数据保留
使用vue-router在Vue页面之间传递数据的方法
10-16
在vue-router中，可以通过定义带有参数的路由路径来实现这一点。在路由定义中添加冒号（:）后的部分即为路由参数，比如`/page2/:id`中的`:id`就是一个参数。 - 在目标路由`Page2`定义中，`/page2/:id`表示该路由...
全栈-Vite3+Vue3+TS+Ant-design-vue3整合
11-07
在本项目中，我们探索了如何使用最新技术栈进行全栈开发，重点是前端的Vite3、Vue3、TypeScript以及Ant Design Vue3的整合，同时涉及后端的SpringBoot、MybatisPlus和MySQL。这是一个全面的实战教程，旨在帮助开发者...
renren-fast-vue_renren-fast-vue前端_renren_基于VUE_vue_
09-30
renren-fast-vue前端魔改
前端工程化–Vue-CLI自动生成页面
01-08
我们的项目是基于vue-cli搭建的，每次需要新加一个页面需要操作以下步骤： 在views文件夹下面新建一个文件夹，用来存放新页面的.vue文件。 需要在routes.js文件里面新添加一个路由。 按照上述操作以后，才可以正常...
Vue页面跳转传递参数及接收方式
10-14
在Vue.js应用中，页面之间的跳转和参数传递是非常常见的操作。这有助于在不同组件间共享数据，特别是在大型单页应用程序（SPA）中。本文将详细介绍两种在Vue中实现页面跳转并传递参数的方法，以及如何接收这些参数。...
vue3点击跳转页面
Heartnottowake的博客
02-05 6904
【代码】vue3点击跳转页面。
vue 组件 echarts跳转总结
Nick_wing的博客
08-25 2439
1.组件传参： （1）父组件P 向子组件 C传参，父组件将要传递的参数放在属性中，子组件用props接收，总体包括三步 P 中引用 C P 中注册 C P将要传递的参数放在属性中 ，C使用props接收 （2）子组件向父组件传参，用到了$emit 具体链接： https://www.cnblogs.com/wty123/p/14046744.html ...
vue通过点击事件实现页面跳转
热门推荐
David_house的博客
04-10 4万+
前言 页面跳转，我们一般都通过路由跳转实现，通常情况下可直接使用router-link标签实现页面跳转，但是如果我们想通过点击别的标签实现页面跳转，怎么办呢？这个时候我们就要用到this.$router.push()方法，下面来给大家简单介绍一下使用！ this.$router.push() 1.首先我们要定义一个点击事件 2.在定义事件中调用this.$router.push()方法 <button @click = "handle">点击跳转</button> <scrip
VUE3 跳转传参的三种方式
qq_54602808的博客
08-18 1万+
1.通过query进行传参。 function acty() { router.push({ path: '/tiaozhn', query: { som: "Aaa" } }) } console.log(route.query.som); 2.通过params进行传参。 function acty() { router.push({ name: 'tiaozhn', params: { id
Vue3路由跳转并传递参数
聂可以的博客
06-06 5572
Vue3路由跳转并传递参数
vue3路由配置及路由跳转传参
m0_57108418的博客
11-17 1万+
在src目录下创建pages文件夹，里面创建两个vue文件命名为student.vue,person.vue。在app.vue中进行路由展示，使用router-link进行路由跳转，to代表跳转到哪个路由。效果如下图所示，点击（到student路由）或（到person路由）会进行路由跳转。声明式路由通过router-link进行路由跳转，編程式路由通过函数实现。路由之间用router路由器，当前路由使用toute路由。student.vue和person.vue。通过router.push进行路由跳转。
解决vue-route路由query不同参数跳转同一页面时数据不会更新问题
大胆刁民的博客
06-08 2323
解决vue-route路由query不同参数跳转同一页面时数据不会更新问题 演示
解决vue路由跳转同一页面，携带不同参数，页面不刷新的问题
在路上`的博客
02-28 2674
Vue2+Ts
vue3 vue-router带参数跳转
03-24
可以使用$route.params来获取带参数的路由信息，示例代码如下： //在Router.js中定义带参数的路由路径 const router = new VueRouter({ routes: [ { path: '/user/:id', name: 'User', component: User } ] }) //在组件中调用带参数的路由 this.$router.push({ name: 'User', params: { id: 123 }}); //在目标组件中获取参数 this.$route.params.id; 希望这能帮助到您！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值