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 相关文章推荐
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
详解JavaScript的变量
Apr 04 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
JavaScript解析JSON数据示例
Jul 16 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
Vue实现todo应用的示例
Feb 20 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多图上传小程序代码
2011/07/17 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
PHP实现的浏览器检查类
2016/04/11 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
JavaScript中this详解
2015/09/01 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
python处理文本文件并生成指定格式的文件
2014/07/31 Python
python开发之thread线程基础实例入门
2015/11/11 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
Python reversed函数及使用方法解析
2020/03/17 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
爸爸的花儿落了教学反思
2014/02/20 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
房屋产权证明书
2015/06/19 职场文书
公司酒会主持词
2015/07/02 职场文书
Nginx动静分离配置实现与说明
2022/04/07 Servers