vue-router实现编程式导航的代码实例


Posted in Javascript onJanuary 19, 2019

除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。即:通过js动态的进行导航链接。

一、this.$router.push( )

router.push(location, onComplete?, onAbort?)

注意:在 Vue 实例内部,你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 <router-link :to="..."> 等同于调用 router.push(...)。

vue-router实现编程式导航的代码实例

vue-router实现编程式导航的代码实例

vue-router实现编程式导航的代码实例

vue-router实现编程式导航的代码实例

vue-router实现编程式导航的代码实例

vue-router实现编程式导航的代码实例

效果:

vue-router实现编程式导航的代码实例

vue-router实现编程式导航的代码实例

二、this.$router.replace();用法同this.$router.replace()

router.replace(location, onComplete?, onAbort?)

跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录(地址栏中),而是跟它的方法名一样 —— 替换掉当前的 history 记录。

vue-router实现编程式导航的代码实例

三、this.$router.go()

vue-router实现编程式导航的代码实例

小结:

router.push(location)

想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。

router.replace(location)

跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。

router.go(n)

这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)

若有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
超级退弹代码
Jul 07 Javascript
FireFox JavaScript全局Event对象
Jun 14 Javascript
csdn 论坛技术区平均给分功能
Nov 07 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 #Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 #Javascript
Vue实现的父组件向子组件传值功能示例
Jan 19 #Javascript
vue-router命名视图的使用讲解
Jan 19 #Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 #Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 #Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 #Javascript
You might like
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
php微信开发接入
2016/08/27 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
几行js代码实现自适应
2017/02/24 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
微信小程序获取用户绑定手机号方法示例
2019/07/21 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
Python统计学一数据的概括性度量详解
2020/03/03 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
Python 图片处理库exifread详解
2021/02/25 Python
python 制作本地应用搜索工具
2021/02/27 Python
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
企业门卫岗位职责
2013/12/12 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
Python基础知识学习之类的继承
2021/05/31 Python
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android