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 相关文章推荐
用JavaScript和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
jQuery TextBox自动完成条
Jul 22 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 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
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
小程序中手机号识别的示例
2020/12/14 Javascript
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
状态机的概念和在Python下使用状态机的教程
2015/04/11 Python
利用Python中的mock库对Python代码进行模拟测试
2015/04/16 Python
Python实现批量读取word中表格信息的方法
2015/07/30 Python
pytorch 预训练层的使用方法
2019/08/20 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
个人优缺点自我评价
2014/01/27 职场文书
敬老模范事迹
2014/05/21 职场文书
理财计划书
2014/08/14 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
优秀党员先进材料
2014/12/18 职场文书
2015年度党风廉政建设工作情况汇报
2015/01/02 职场文书
怎样写离婚协议书
2015/01/26 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS