详解Vue中一种简易路由传参办法
时间:2019-04-06
本文章向大家介绍详解Vue中一种简易路由传参办法,主要包括详解Vue中一种简易路由传参办法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
情景模拟:
A页面中,有一些div是根据A中的book数据通过v-for生成的,比如item。
并且点击会根据路由跳转到B页面。
而跳转到B页面后,我需要A中的item。
<div v-for="(item,index) in book" :class='{on:$route.path === `/${item.to}/`}' @click='toOther(item.to)'> </div>
toOther(to,run) { if(this.$route.path!==`/${to}`){ location.hash = to; } },
解决办法:
在A中的click事件中将item传进toOther()函数中,再根据路由传入
toOther(to,run) { if(this.$route.path!==`/${to}`){ location.hash = to+'?'+run.key; } },
即将要传的参数添加在原本url加?之后,这样既不影响路由,也比较方便。
如图1所示:
如图2,这样子我们便可以在 this.$route 的fullPath中拿到A中我们需要传递的参数了。
具体要拿还需要进行字符串的分割取出所需的信息,但是这样子会很繁琐,我们只需多加几个字,
在你的参数前加上'sth'=
toOther(to,run) { if(this.$route.path!==`/${to}`){ location.hash = to+'?'+'book_key='+run.key; } },
你就会发现你可以在query中拿到这些个数据
并且是一个object的形式
简直不能更完美!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 当InternalsVisibleToAttribute特性遭遇"强签名"
- MyBatis-从查询昨天的数据说起
- WCF并发(Concurrency)的本质:同一个服务实例上下文(InstanceContext)同时处理多个服务调用请求
- Spring集成RabbitMQ-必须知道的几个概念
- Spring读书笔记——bean创建(上)
- 15:21爆出的小程序功能升级,你还要对小程序观望吗?
- 如何解决分布式系统中的跨时区问题[原理篇]
- 什么是区块链:块的结构
- Spring读书笔记——bean创建(下)
- 当区块链遇上传统行业 我们的生活和工作会改变吗?
- 如何设计开发好一个 HTTP API?
- [WCF权限控制]基于Windows用户组的授权方式[下篇]
- Spring读书笔记——bean解析
- 10个大数据误区,看看你中了几个?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- mysql 找出最新时间的一条数据
- 【NPM库】- 0x05 - 文件、路径操作
- MySQL中insert阻塞问题的分析
- Fedora32下编译安装Qemu5.1并创建ARM版本Linux虚拟机
- 面试官想问的HashMap,都在这一篇里面了!
- CentOS7下使用Mondo Rescue实现系统全备份
- CentOS7下搭建Rsyslog Server记录远程主机系统日志
- 企业运维经典面试题汇总(4)
- 使用QEMU模拟树莓派Raspberry Pi
- Octave梯度下降法最优化代价函数的一个例子—ML Note 38
- Spring Boot入门系列(十八)mybatis 使用注解实现增删改查,无需xml文件!
- Mongodb多键索引之嵌套文档
- MySQL中的这几类日志,你一定要知道
- 微服务技术栈:API网关中心,落地实现方案
- 你的数据库服务器IO调度算法不对,难怪那么慢