Vue3关于页面跳转(push)的时候，并传递数据过去

首先在A页面

Detail为事件名，Shuju为要传递的数据

<!-- 跳转到详情页面 B.vue的页面 -->
<a href="#" @click="Detail(Shuju)">详情</a>

这个是用query的

path为要跳转的路径，而query为要传递的数据，这里我的Shuju是一个对象，所以省略了{}这个

// 跳转到详情的页面
const router = useRouter()const Detail = (Shuju)=>{router.push({path:'/detail',query:Shuju// 多个参数这样的写法// query:{Shuju}})}

在B页面接收

const route = useRoute()
//打印传递过来的数据
console.log(route.query);

另外一种做法，用params

使用name+params
name是：你定义路由的name
params中传递的数据不能为整个对象的，而是需要单个数据对应的键名

const Detail = (Shuju)=>{router.push({name:'Detail',params:{"context":Shuju.context}})}

接收

const route = useRoute()
console.log(route.params.context);

Vue3关于页面跳转(push)的时候，并传递数据过去相关推荐

SpringMVC响应使用案例（带数据页面跳转,快捷访问路径,返回json数据）
页面跳转转发(默认) @RequestMapping("/showPage1") public String showPage1() {System.out.println(&q ...
微信小程序页面跳转url传参，对象数据过长问题
小程序url传参如果是对象的话需要先用JSON.stringify()转换一下,接受页面在用JSON.parse()再转换回来. 但这样传参有一个问题,当对象数据长度过大时会报错,因为url传参时程序 ...
vue保存页面的值_vue前端页面跳转参数传递及存储
不同页面间进行参数传递,实现方式有很多种,最简单最直接的方式就是在页面跳转时通过路由传递参数,如下所示. 路由传递参数 this.$router.push({ name: '跳入页面', params ...
HTML 页面跳转时传递参数（jquery.params.js）
HTML 页面跳转时传递参数(jquery.params.js) 描述:在 HTML 页面跳转时,通过 URL 传递参数一.引入在解析参数页面的 JS 中引入:jquery.params.js(代 ...
Android:页面跳转传参方式一，页面跳转传参方式二
一.页面跳转传参方式一跳转的过程如何传参:也就是页面之间如何传递参数,有点像函数调用如何传参,页面跳转也要传参. 复制一个工程你要跳转,(现在的代码如下),intent 既然能设置跳转到哪个页面 ...
VUE3页面跳转路由跳转带参路由跳转
VUE3页面跳转路由跳转带参路由跳转第一种第二种第一种跳转: import {useRouter} from "vue-router"; const router = us ...
android上方导航条跳转页面,《成为大前端》系列 7. 多页面、页面跳转和Navigation模块...
介绍开发过移动 Web 页面的同学都知道,单个页面由客户端的 UI 所承载,页面间的跳转也不再是使用 window 和 location,也不是使用 a 标签,而且调用 Native 写好的 br ...
说说如何使用 vue-router 实现页面跳转
vue-router 有两种实现页面跳转的方法. 1 <router-link> 组件 <template><div><h3>首页</h3> ...
【Flutter】Hero 动画 ( Hero 动画使用流程 | 创建 Hero 动画核心组件 | 创建源页面 | 创建目的页面 | 页面跳转 )
文章目录 ◯.Hero 动画简介一.创建 Hero 动画核心组件二.创建源页面三.创建目的页面四.页面跳转五.完整代码示例六.相关资源 ◯.Hero 动画简介 Hero Widget 动画 ...

Vue3关于页面跳转(push)的时候，并传递数据过去

首先在A页面

这个是用query的

在B页面接收

另外一种做法，用params

Vue3关于页面跳转(push)的时候，并传递数据过去相关推荐

最新文章

热门文章