vue中页面跳转传值_vue的页面跳转方式和传值、取值

写业务中，从一个页面跳转到另一个页面，经常需要传值和取值，如何实现？

1、通过router-link进行跳转，传递方式：

使用query传递参数，路由必须使用path引入，

使用params传递参数，路由必须使用name引入

跳转

跳转地址 ====> /home?key=hello&value=world

取值 ====> this.$route.query.key

跳转

跳转地址 ====> /home

取值 ====> this.$route.params.key

2、$router方式跳转

通过query

this.$router.push({

path: '/detail',

query: {

name: 'admin',

code: 10021

}

});

跳转地址 ====> /detail?name=admin&code=10021

取值 ====> this.$route.query.name

通过params

this.$router.push({

name: 'detail',

params: {

code: 10021

}

});

跳转地址 ====> /detail(注意：地址不会有参数，所以页面刷新传递的数据就没了)

取值 ====> this.$route.params.code

vue中页面跳转传值_vue的页面跳转方式和传值、取值相关推荐

关于Vue中，$this.router.push到当前页面，只是传入参数不同，页面不刷新的问题解决
关于Vue中,$this.router.push到当前页面,只是传入参数不同,页面不刷新的问题解决参考文章: (1)关于Vue中,$this.router.push到当前页面,只是传入参数不同,页面 ...
vue 关于父组件同时多次调用子组件而产生的 this取值的bug问题
vue 关于父组件同时多次调用子组件而产生的 this取值的bug问题我们在开发vue项目的使用,会经常使用this这个关键字,this指向vue这个实例,我们可以使用this.来获取data里面 ...
vue中父子组件先后渲染_vue父子组件传值（子传父，非父子组件传值）
1. 子组件向父组件传值子组件: <template><div>子组件:<span>{{childValue}}</span><!-- 定义一个 ...
vue中父子组件先后渲染_vue父子组件钩子函数的执行顺序
加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount-& ...
vue中tab切换前端实现_vue实现Tab切换功能
在项目开发中,我们经常会碰到Tab切换的功能,而在Vue中想实现这样的功能也应该有很多种,常用的三种应该是 Tab路由切换.Tab动态组件切换.通过v-show设置Tab显示隐藏.每种方法实现起来其实 ...
vue中常碰见的坑_Vue 与 Vuex 的第一次接触遇到的坑
在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式但是如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便 ...
vue中父子组件先后渲染_Vue中父子组件执行的先后顺序
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...
vue 中的el表达式_解释el页面数据表达式
java web开发人员经常使用标签 struts标签库国际化配置配置国际化 1.国际化配置在struts自带的app中的struts-config.xml中的<message-resou ...
在前端网页设计中 align 和 valign 两种对齐方式的不同取值区分（持续补充）
文章目录前言一.align 与 valign 的对齐方式与取值二.常见应用区分整理 2.1.H5 页面设计的取值 2.2.表格标题的取值 2.3.表格属性的取值总结前言不知道大家在学习 H ...

vue中页面跳转传值_vue的页面跳转方式和传值、取值

vue中页面跳转传值_vue的页面跳转方式和传值、取值相关推荐

最新文章

热门文章