5.vue-router之什么是编程式路由
时间:2022-06-09
本文章向大家介绍5.vue-router之什么是编程式路由,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言:编程式路由在我们的项目使用过程中最常用的的方法了。 GitHub:https://github.com/Ewall1106/mall
什么是编程式路由呢?就是通过写js代码来实现页面的跳转
1.$router.push('name'); 或者 $router.push({path: 'name'});
首先我们来讲讲简单的,上面两个方法记住,等效的。
① 还是在test.vue
组件里面写个div并给它添加一个click
跳转事件:
div上添加一个click点击事件
② 在view
文件下新建一个goods.vue
goods.vue
③ 在router
中引入这个goods
组件
路由
④ 打开路径为test的页面并点击
localhost
⑤ ok,点一下我们就到goods页面了,实现了跟router-view标签一样的效果
goods页面
Ok,到这里我们已经实现了编程式路由的跳转了,接下来我们来试试路由携带参数跳转并接受参数。
2.$router.push({path: 'name?a=123'}) 或者 $router.push({path: 'name',query:{a:123}})这两种方式都可以
话不多说,看图你应该能看懂:
路由跳转并携带参数
② 在goods.vue中输入
提醒一句,这里的获取上一级页面传过来的参数是$route.query.goodsId
,是$route
不是$router
:
goods.vue
③ ok,我们就可以看到页面中显示上级页面传过来的参数了:
localhost
goods.vue
3.$router.go();
这个就随意提一下,就是类似于history.go()的方法,括号里面填个1
就是前进一级页面,-1
就后退一级页面。差不多就是这样。
参考学习 https://router.vuejs.org/zh-cn/ https://developer.mozilla.org/zh-CN/docs/Web/API/History https://www.jianshu.com/p/3036137769da https://www.jianshu.com/p/f499d9f64958
- 如何在CDH集群上部署Python3运行环境及运行Python作业
- Hacking Aria2 RPC Daemon
- 如何修改CDH集群的DataNoe节点HOSTNAME
- Sparkjava Framework 文件遍历漏洞(CVE-2016-9177)分析与探究
- 绕过混合内容警告 - 在安全的页面加载不安全的内容
- 如何在Kerberos环境使用Flume采集Kafka数据并写入HDFS
- 熊市里生成几个BTC靓号,冷存储起来装死吧
- 傲游浏览器漏洞系列(上)- 任意文件写入,UXSS
- 如何使用Cloudera Manager在线为集群减容
- GitLab 任意文件读取漏洞 (CVE-2016-9086) 和任意用户 token 泄露漏洞
- 如何使用Hue通过数据文件创建Collections
- GNU tar 解压路径绕过漏洞(CVE-2016-6321) 分析
- Memcached 命令执行漏洞(CVE-2016-8704、CVE-2016-8705、CVE-2016-8706)简析
- 使用Hue创建Ssh的Oozie工作流时重定向输出日志报错分析
- 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 数组属性和方法
- 残差收缩网络:一种深度学习故障诊断算法
- Solr学习笔记 - 关于近实时搜索
- Solr学习笔记 - 关于timeAllowed
- Solr学习笔记 - 关于cache
- PG密码安全
- 如何利用Terraform工具编排管理TcaplusDB
- mysql隐式转换造成的查询结果不正确案例
- 【TBase开源版测评】体验安装
- 【Golang】go get遇到git fetch-pack: expected shallow list
- 聊聊dubbo-go的DefaultHealthChecker
- Java后端面试学习知识总结
- Spring框架源码脉络分析(一):IoC与容器、Bean和BeanDefinition
- Spring-Data-Redis 2.X以上版本使用心得和一些坑
- Java后端面试学习知识总结——数据库:MySQL
- Java 记一次自定义比较器中compareTo方法使用long强转int作为比较结果产生的bug