VUE-008-通过路由 router.push 传递 query 参数(路由 path 识别,请求链接显示参数传递)
2023-09-11 14:18:59 时间
在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,通常可通过路由进行表单参数的传递。
首先,配置页面跳转路由。在 router/index.js 中配置相应的页面跳转路由,如下所示:
其次,在相应页面的 index.vue 中的 methods 创建相应的方法,通过 $router.push 进行页面跳转及参数传递。如下所示:
通过 query 传递的参数信息在请求路径中,参数信息明文显示在请求 URL 上。通过当前的设置方式,若强制刷新页面,则表单内容也不会丢失。
再次,跳转页面接收参数设置。在 export default 可通过 $route.params 进行获取请求参数信息,并在页面初始化的时候,进行修改表单数据的绑定操作,如下所示:
通过如上设置,即可在页面跳转的时,通过路由进行表单参数的信息传递。
相关文章
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
- [转] vue自定义组件(通过Vue.use()来使用)即install的使用
- vue - dist
- 【Vue】你必须要知道的vue中v-on指令的修饰符
- 06Vue - Vue实例(构造器)
- [转]Vue CLI 3搭建vue+vuex 最全分析
- 【vue系列-04】vue的表单数据收集,基本指令和自定义指令
- vue 父组件如何调用子组件的函数Methods
- Vue项目 跨域 解决方案与 vue.config.js 配置解析
- vue学习笔记六:Jquery VS Vue之网络请求明细对照
- vue学习笔记四:Jquery VS Vue之元素操作明细对照
- 【vue init】一.使用vue init搭建vue项目
- Vue项目常见场景需求的解决方案
- springboot+vue学生毕业离校系统(源码+说明文档)
- Vue-cli 4在vue.config.js中配置别名
- vue component动态组件
- idea中启动vue项目
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
- Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理
- Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用
- Vue脚手架报错: Component name “xxx“ should always be multi-word(vue/multi-word-component-names)的解决办法
- iview Carousel 轮播图自适应宽高;iview 轮播图 图片重叠问题;iview tabs 高度互相影响问题;vue this问题;
- vue基本使用--refs获取组件或元素
- 7.VUE组件的生命周期