VUE-006-通过路由 router.push 传递 params 参数(路由 name 识别,请求链接不显示)
2023-09-11 14:18:59 时间
在前端页面表单列表修改时,经常需要在页面切换的时候,传递需要修改的表单内容,通常可通过路由进行表单参数的传递。
首先,配置页面跳转路由。在 router/index.js 中配置相应的页面跳转路由,如下所示:
其次,在相应页面的 index.vue 中的 methods 创建相应的方法,通过 $router.push 进行页面跳转及参数传递。如下所示:
通过 params 传递的参数信息在请求体中,不体现在请求 URL 上。通过当前的设置方式,若是强制刷新页面,则表单内容会丢失。
再次,跳转页面接收参数设置。在 export default 可通过 $route.params 进行获取请求参数信息,并在页面初始化的时候,进行修改表单数据的绑定操作,如下所示:
通过如上设置,即可在页面跳转的时,通过路由进行表单参数的信息传递。
补充说明:
在通过路由传递参数时,也可直接传递表单对象信息,无需添加 codeInfo。此种方式较之第一种方式更加简洁(墙裂推荐)。
相关文章
- import Vue from 'vue';
- [转] vue自定义组件(通过Vue.use()来使用)即install的使用
- vue - config
- 【Vue】Vue组件或页面中查看当前Vm对象的方法
- 【Vue】单文件的组件(.vue)代码实例
- Vue - 完美解决小数的四则运算(加减乘除)导致精度丢失问题,提供详细计算示例代码vue数据计算丢失精度
- Vue - 实现锚点跳转定位到指定页面位置功能 / Anchor 页面添加锚点(仅需一个函数代码超级简洁)
- 一文带你理解vue创建一个后台管理系统流程(Vue+Element)
- Vue2.0 搭建Vue脚手架(vue-cli)
- 【Vue】通过自定义指令回顾 v-内置指令
- Vue项目 跨域 解决方案与 vue.config.js 配置解析
- 揭秘 Vue.js 九个性能优化技巧
- VUE-007-通过路由 router.push 传递 query 参数(路由 name 识别,请求链接显示参数传递)
- Vue富文本编辑器的使用vue-quill-deitor
- 基于springboot+vue的“体质测试数据分析及可视化设计”程序设计实现【毕业论文,源码】
- springboot+vue考研资讯平台(源码+文档)
- Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理
- 解决:Vue调试工具vue-devtools安装方法——解决下载速度缓慢,安装报错问题
- Vue学习第27天——路由vue-router的详解及案例练习
- Vue学习第19天——vue脚手架配置代理
- vue-route开发注意事项
- Vue响应式的理解和简单的实现
- Vue使用Element-UI的table组件和后端接口进行数据交互(包含前后端代码)
- vue 登录页背景-粒子特效(Vue-Particles)