vue路由导航方法 router.push，router.replace，router.go，router.back，router. forward

最新推荐文章于 2024-06-25 14:48:26 发布
最新推荐文章于 2024-06-25 14:48:26 发布
阅读量2.4k 收藏 11
点赞数
分类专栏： vue 文章标签： vue router 路由
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lihefei_coder/article/details/111990087
版权
方法说明
router.push(url)导航到新url，向 history栈添加一条新访问记录，等同于window.history.pushState
router.replace(url)导航到新url，替换 history 栈中当前记录，等同于window.history.replaceState
router.go(n)在 history 记录中向前或者后退多少步，类似 window.history.go(n)
router.go(1) 在浏览器记录中前进一步，等同于 history.forward()
router.go(-1) 后退一步记录，等同于 history.back()
router.go(0) 刷新当前页面
router.back()导航回退一步，类似于router.go(-1)
router. forward()导航前进一步，但是不刷新前进页的表单，类似于router.go(1)
lihefei_coder
关注
  • 0
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 之返回上一页按钮 $router.back(-1) 刷新当前页：this.$router.go(0);
夜阑珊妖妖
11-20 6978
vue 之返回上一页按钮 <img src="@/assets/img/nav-prve.png" alt="" class="navprve" @click="$router.back(-1)" />   其他文章：https://www.cnblogs.com/cheng...
vue-router3.0版本中 router.push 不能刷新页面的问题
08-27
主要介绍了vue-router3.0版本中 router.push 不能刷新页面的问题,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
（四十五）Vue Router之编程式路由导航
最新发布
忆亦何为的博客
06-25 1062
创建 a 标签来定义导航链接来进行跳转这一种方法，在现实开发中比较局限，所以在Vue Router里可以借助 router 的实例方法，通过编写代码来实现，而不用通过用户的交互行为（例如点击链接）来触发路由跳转。另外，与router.push和router.replace不同，router.go方法并不接受回调函数参数，因为它是直接操作历史记录的导航操作，而不是触发路由的生命周期钩子。router.go是Vue Router提供的一个方法，用于在路由历史记录中进行前进或后退的导航。方法将不会有任何效果。
vue router.push(),router.replace(),router.go()
weixin_34290390的博客
12-15 161
1.router.push(location)=====window.history.pushState 想要导航到不同的 URL，则使用router.push方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。 1 2 3 4 5 6 7 8 9 10 11 // 字符串...
vue router.push()，router.replace()，router.go()，router.back()，router. forward()
LonewoIf的博客
05-30 8180
1、router.push()：导航到不同的 url，向 history 栈添加一个新的记录。（=== window.history.pushState） 声明式 编程式 <router-link :to=""> router.push() // 字符串 router.push('home') // 对象 router.push({ path: 'home' })...
Vue-router 创建与切换组件实例
Crazykun的博客
07-27 359
1、定义组件模板实例 var login = { template: "#login" } var register = { template: "#register" } 2、引入路由js文件 <!-- 引入路由js文件 --> <script src="js/vue-router.js"></script> 3、创建路由对象 //创建vue-ro
vue中$router.back()和$router.go()
qq_43638735的博客
04-10 8637
返回上一页，有两种方法： 1. $router.back() 2. $router.go() 使用$router.back()和$router.go(-1)作用相同，都是返回原页面，但如果原页面路由携带参数，使用以上两个方式返回的原页面路由参数消失，此时使用$router.back(-1)返回原页面路由，参数仍存在。 go(-1):原页面表单中的内容会丢失； this.$router.go(-1):后退+刷新； this.$router.go(0):刷新； this.$router.go(1):前
解决vue.js this.$router.push无效的问题
10-18
Vue Router提供了一个编程式的导航方法——this.$router.push，用于在应用内进行页面跳转。然而，在实际开发过程中，我们可能会遇到this.$router.push无效的问题，导致路由跳转无法正确执行。本文将详细介绍在什么...
Vue this.$router.push(参数)实现页面跳转操作
10-14
首先，`this.$router.push`是Vue Router提供的编程式导航方法，它能够触发视图的变化。使用`this.$router.push`进行页面跳转时，可以通过不同的参数来控制跳转行为。 1. 使用字符串形式指定目标路由路径： ```...
vue.js this.$router.push获取不到params参数问题
10-15
`this.$router.push`方法是用于导航到新的路由的关键函数，但有时候我们在传递`params`参数时可能会遇到一些问题。本文将详细讲解如何正确地使用`this.$router.push`传递和获取`params`参数，并分析为何会出现获取不...
JS $router.back()和$router.go()
Jana Jing的分享
10-26 1183
使用$router.back()和$router.go(-1)作用相同，都是返回原页面，但如果原页面路由携带参数，使用以上两个方式返回的原页面路由参数消失，此时使用$router.back(-1)返回原页面路由，参数仍存在。
当使用this.$router.back()或者this.$router.go(-1)返回上一页时，搭配组件内路由守卫，屏幕闪烁和跳转页面错误问题
qq_46266925的博客
03-11 2364
当使用this.$router.back()或者this.$router.go(-1)返回上一页时，搭配组件内路由守卫，出现屏幕闪烁和跳转页面错误问题
【vue-router源码】八、router.go、router.back、router.forward源码解析
MAXLZ的博客
06-10 3775
【vue-router源码】系列文章将带你从0开始了解vue-router的具体实现。本篇文章将介绍router。go、router.back、router.forward的实现。
vue中this.$router.push()路由传值和获取的两种常见方法
xqhys的博客
04-22 1万+
转载：https://www.cnblogs.com/toonezhr/p/10325457.html 1、路由传值 this.$router.push() （1） 想要导航到不同的URL，使用router.push()方法，这个方法会向history栈添加一个新纪录，所以，当用户点击浏览器后退按钮时，会回到之前的URL （2）当点击 <router-link> 时，这个方法...
vue中$router.back()、$router.go()的区别使用
热门推荐
qq_37734787的博客
10-14 2万+
使用解析1 开发中遇到返回上一页的需求，有两个方法可选： 1.$router.back() 2.$router.go() 在使用中发现，使用router.back()和router.back()和router.back()和router.go(-1)作用相同，都是返回原页面。但如果原页面路由携带参数，使用以上两个方法返回的原页面路由参数消失，此时使用$router.back(-1)返回原页面路由参数仍存在。 使用解析2 go(-1): 原页面表单中的内容会丢失； this.$router.go(-1)：后退
152Vue-编程式导航$router.push\$router.go+back()
Gy_9543的博客
08-09 299
Vue-Router中常见的导航方式： this.$router.push("hash地址"); this.$router.push("/login"); this.$router.push({ name:'user' , params: {id:123} }); this.$router.push({ path:"/login" }); this.$router.push({ path:"/login",query:{username:"jack"} }); this.$router.go( n );.
vue中$router.go/back/replace/push使用区别
xiaobaiweb的博客
10-24 1205
vue小记
vue常用路由router之“缓存路由组件、后退、前进、任意跳转”
空投在我怀里的博客
03-11 859
作用：让不展示的路由组件保持挂载，不被销毁。 具体编码： <keep-alive include="News"> <router-view></router-view> </keep-alive> 案列展示： 1.案列1： <template> <div class="col-xs-offset-2 col-xs-8"> <div class="page-header"> ...
router返回
m0_58235310的博客
12-13 341
【代码】router返回。
vue-router中router.replace和router.push有什么不同
05-27
Vue-Router提供了两种导航路由的方式：router.push()和router.replace()。 router.push()会向history栈中添加一个新的记录，当用户点击浏览器后退按钮时，会回到前一个页面。而router.replace()也会向history栈中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值