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 相关文章推荐
在html页面上拖放移动标签
Jan 08 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
微信小程序实现滚动消息通知
Feb 02 Javascript
微信小程序排坑指南详解
May 23 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
vscode中Vue别名路径提示的实现
Jul 31 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
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 Session会话超时时间设置方法
2014/06/10 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
python的绘图工具matplotlib使用实例
2014/07/03 Python
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
python爬虫要用到的库总结
2020/07/28 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
市场安全管理制度
2014/01/26 职场文书
阳光体育活动方案
2014/02/16 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
综治目标管理责任书
2015/05/11 职场文书
环保守法证明
2015/06/24 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js
python模板入门教程之flask Jinja
2022/04/11 Python
Java的Object类的九种方法
2022/04/13 Java/Android
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers