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 相关文章推荐
关于js datetime的那点事
Nov 15 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
javascript 树形导航菜单实例代码
Aug 13 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
Apr 21 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 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获取汉字的拼音(全部与首字母)
2013/06/27 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
php获取图片信息的方法详解
2015/12/10 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
javascript中的作用域scope介绍
2010/12/28 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
Bootstrap每天必学之表格
2015/11/23 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
layui表格设计以及数据初始化详解
2019/10/26 Javascript
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
Python 多核并行计算的示例代码
2017/11/07 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
python创建学生管理系统
2019/11/22 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
django中ImageField的使用详解
2020/12/21 Python
家长会主持词开场白
2014/03/18 职场文书
2014年控辍保学工作总结
2014/12/08 职场文书
仙境之桥观后感
2015/06/16 职场文书
入学证明
2015/06/23 职场文书
2015年除四害工作总结
2015/07/23 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
导游词之塘栖古镇
2019/12/04 职场文书