vue-router实现编程式导航的代码实例
除了使用 <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(...)。
效果：
二、this.$router.replace()；用法同this.$router.replace()
router.replace(location, onComplete?, onAbort?)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录(地址栏中)，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
三、this.$router.go()
小结：
router.push(location)
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
router.replace(location)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
router.go(n)
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)
若有不足请多多指教！希望给您带来帮助！
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接
相关文章
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
今天小编就为大家分享一篇解决vue-router在同一个路由下切换,取不到变化的路由参数问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了vue滚动tab跟随切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
详解Vue的watch中的immediate与watch是什么意思
这篇文章主要介绍了详解Vue的watch中的immediate与watch是什么意思，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了vue-cli 关闭热更新操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
element-ui是一个比较完善的UI库,但是使用它需要有一点vue的基础，下面这篇文章主要给大家介绍了关于在vue 2.0项目中如何引入element-ui的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-09-09
这篇文章主要介绍了Vue如何将时间戳转换日期格式,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue项目API接口get请求传递参数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
Vue是一款流行的JavaScript框架,用于开发动态单页应用程序,本地安装和环境配置是学习和使用Vue的第一步,下面这篇文章主要给大家介绍了关于vue开发者vite多环境配置的相关资料,需要的朋友可以参考下2023-06-06
解决ant design vue中树形控件defaultExpandAll设置无效的问题
这篇文章主要介绍了解决ant design vue中树形控件defaultExpandAll设置无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
Vue Echarts报错Initialize failed: invalid dom解决方法
最近因为工作需要,用到了ECharts做图表,也遇到了问题,就来跟大家总结分享一下,下面这篇文章主要给大家介绍了关于Vue Echarts报错Initialize failed: invalid dom的解决方法,需要的朋友可以参考下2023-06-06
最新评论