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 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 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正则的Unknown Modifier错误解决方法
2010/03/02 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
php实现将Session写入数据库
2015/07/26 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
python开发简易版在线音乐播放器
2017/03/03 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
python tkinter窗口最大化的实现
2019/07/15 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
基于TensorFlow常量、序列以及随机值生成实例
2020/01/04 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
智利最大的网上商店:Linio智利
2016/11/24 全球购物
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
什么是GWT的Module
2013/01/20 面试题
学生会主席事迹材料
2014/01/28 职场文书
《泉水》教学反思
2014/04/11 职场文书
小学五年级学生评语
2014/04/22 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
会计师事务所实习证明
2014/11/16 职场文书
餐厅如何利用“营销策略”扭转亏本局面
2019/10/15 职场文书
mysql如何配置白名单访问
2021/06/30 MySQL