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 相关文章推荐
jQuery学习笔记之Helloworld
Dec 22 Javascript
jquery操作select option 的代码小结
Jun 21 Javascript
js Dialog 实践分享
Oct 22 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
浅析JS运动
Dec 28 Javascript
Vue组件化开发思考
Feb 02 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
javascript数组的定义及操作实例
Nov 10 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 Javascript
JavaScript实现网页留言板功能
Nov 23 Javascript
video.js添加自定义组件的方法
Dec 09 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读MYSQL中文乱码的解决方法
2006/12/17 PHP
php 过滤器实现代码
2010/08/09 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
用js实现trim()的解决办法
2013/04/16 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
2015/12/04 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
python对url格式解析的方法
2015/05/13 Python
python调用百度语音识别api
2018/08/30 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
如何基于python实现脚本加密
2019/12/28 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
SOKOLOV官网:俄罗斯珠宝首饰品牌
2021/01/02 全球购物
财务管理职业生涯规划范文
2013/12/27 职场文书
保密工作实施方案
2014/02/24 职场文书
合作意向书
2014/07/30 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP