vue-router中push、replace、go的区别

已于 2023-05-31 15:07:17 修改
阅读量627 收藏 2
点赞数
文章标签： vue.js 前端 javascript
于 2023-05-20 17:58:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58152436/article/details/130784142
版权

router.push('要跳转的路径')会向history栈中添加新的记录，当点击回退时，会回到之前的url，即回到根路径。

router.replace（‘要跳转的路劲’）它的作用是替换当前的history记录

router.go(-1):后退和刷新

router.go(0):刷新,当需要刷新该页面时，可以使用此方法

router.go(1):前进

qq_58152436
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-Router的使用方法
12-11
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮  => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。 点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么就正好能显示home的内容。这就要在js 文件
vue-taro-router:基本 Taro ，扩展成 vue-router 的使用体验
05-28
VueTaroRouter 基本 Taro ，扩展成 vue-router 的使用体验 Installation npm i vue-taro-router -S Usage // router.js import VueTaroRouter from "vue-taro-router"; const router = new VueTaroRouter(); // 添加拦截器 router .beforeEach((to, from, next) => { console.log(to); console.log(from); next(); }) .beforeEach((to, from, next) => { if (~to.path.indexOf("abc2")) { // 在拦截器里重定向 next({
vue-router3.0版本中 router.push 不能刷新页面的问题
11-30
在 github 的 vue-router 中找到同样的一个问题：3.0.1版本通过router实例无法跳转 昨天发现有些路由不能正常跳转，找了一下发现都是那些实例化后使用 router.push 而不是直接使用 this.$router.push 的地方。 出现的情况是 router.push 后，url变化了，但是页面没有刷新，手动刷新一下才出现应有的画面。 我看了一下 package.json，我的 vue 和 axios 是没有写版本号，但 vue-router 明明写了版本号，怎么可能以前行的，现在就不行了呢？ 然后，我使用 npm view vue-router 查看后才发现使用的
vue-router 中 meta的用法详解
01-21
如果我想做下面这个功能： 路由 代码： 用这个获取 以上这篇vue-router 中 meta的用法详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
编程式导航：router.go()方法怎样使用？
最新发布
zy1992As的博客
02-20 197
router.go()方法的参数是一个整数，表示在history历史记录中前进或后退多少步，类似于window.history.go()。this.$router.go(-1)相当于history.back()，表示后退一步;this.$router.go(1)相当于history.forward()，表示前进一步，功能类似于浏览器上的后退和前进按钮，相应的地址栏也会发生改变。下面我们通过例5-9进行演示。(2)在浏览器中打开demo09.html，单击“后退”按钮，浏览器就会执行后退操作。
vue router路由 push、replace、go的区别
u013505589的博客
10-19 1631
最近在公司写代码的时候遇到路由跳转的回退问题，开个贴记录一下。 1. this.$router.push 使用router.push()方法，这个方法会向history栈添加一个新纪录，成功跳转后点击浏览器的回退按钮会跳回之前的页面。 字符串跳转方法 this.$router.push('需要跳转的路径名称') 对象跳转方法 this.$router.push({path:"跳转的路径地址"}) // router里定义的path地址 带参数的跳转方法 this.$router.pu.
【vue-router源码】八、router.go、router.back、router.forward源码解析
MAXLZ的博客
06-10 3616
【vue-router源码】系列文章将带你从0开始了解vue-router的具体实现。本篇文章将介绍router。go、router.back、router.forward的实现。
vue $router.go(-1)的使用
Allen-Ye博客
05-11 6047
在项目中可能会遇到这样的问题，就是跳到详情在返回来还希望保持原来的搜索结果，就是不希望刷新，这个时候呢keep-alive就起到了很大的作用 接下来就说说如何使用keep-alive来动态缓存页面的。 一： 直接在外边加一层keep-alive就是全部缓存，返回都不刷新 比如在App.vue <template> <div id="app"> <keep-alive> <router-view></router-vie
vue路由里面的 router.push(),router.replace(),router.go()
Aimee的博客
01-04 2万+
        之前在项目中用push和go用的比较多，没怎么注意到replace的用法。之前还一直在想为什么vue没有一个像微信小程序路由里面的wx.redirectTo一样的路由方式，原来是自己没有注意到。 一、router.push()         想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器...
vue中的$router.go()
负数
01-16 7444
//返回上一浏览历史中 &lt;span @click="$router.go(-1)"&gt; &lt; &lt;/span&gt; //当前页面刷新 &lt;span @click="$router.go(0)"&gt; &lt; &lt;/span&gt;
vue-router.js
12-30
vue路由vue-router.js文件下载
vue 中router.go，.push和.replace的区别
qq_37875903的博客
07-21 679
1、router.go(n) 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n) 2、router.push(location) 想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所 以，当用户点击浏览器后退按钮时，则回到之前的 URL。 3、router.replace(location) 跟 router.push 很像，唯一的不同就是，它不会向 hi
vue中的this.$router.replace()和.push()和.go()的区别解析
qq_42426993的博客
01-05 1761
1. this.$router.push() 跳转到不同的url，但这个方法会向history栈添加一个记录，点击后会返回到上一个页面。 2. this.$router.replace() 跳转到不同的url，这个方法不会向history栈添加一个记录，点击后会返回到上上一个页面 3. this.$router.go(n) 向前向后跳转n个页面，n为正数向前跳转n个页面，负数后退n个页面 ...
Vue------this.$router.back()、this.$router.go()的异同
COCOLI_BK的博客
05-27 4908
返回上一个页面： 1.$router.back() 2.$router.go() 区别点在于： go(-1): 原页面表单中的内容会丢失； this.$router.go(-1)：后退+刷新； this.$router.go(0)：刷新； this.$router.go(1) ：前进 back(): 原页表表单中的内容会保留；在返回界面传递参数； this.$router.back():后退 ； this.$router.back(0) 刷新； this.$router.back(1)：前进
this.$router.go()和this.$router.push()的区别
马优晨
06-22 5476
this.router.go()和this.router.go()和this.$router.replace的差别 this.$router.go(val) 介绍： 在history记录中前进或者后退val步， - 当val为-1时回到上一页。 - 当val为0时刷新当前页面。 - 当val为1到下一页。 this.$router.go(1) //类似history.forward() this.$router.go(-1) //类似history.back() this.$rout
vue router编程式导航$router.push()和$router.go()
weixin_45842655的博客
12-15 1552
一: 通常我们跳转页面有两种方式 a链接进行跳转,标签跳转. window.location.href,编程式导航(通过写js跳转页面的叫编程式导航) 二: 简单介绍 在Vue中我们通常使用router-link来跳转,router-link默认会渲染成a标签.相当于标签跳转.如果想用编程式导航,用window.location.href吗?vue不提倡操作dom或bom所以并不建议这么做....
this.$router.go()和this.$router.push()的差别
diaobiteng1128的博客
03-21 1993
1.this.$router.go(val) => 在history记录中前进或者后退val步，当val为0时刷新当前页面。 2.this.$router.push(path) => 在history栈中添加一条新的记录。 转载于:https://www.cnblogs.com/luyuefeng/p/8618944.html...
vue-router 路由超详细教程
热门推荐
weixin_47124112的博客
09-06 3万+
路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。
vue-router的push和replace
03-16
Vue Router 是 Vue.js 官方的路由管理器，它可以通过 push 和 replace 方法来实现路由跳转。 push 和 replace 方法都可以用于在应用程序的路由中导航，但它们之间有一些重要的区别： 1. push 方法会向浏览器的历史记录中添加一个新条目，而 replace 方法则会用新的路由替换当前的历史记录条目。 2. push 方法会将新的路由添加到浏览器历史记录的末尾，因此用户可以通过点击浏览器的“后退”按钮返回到前一个路由。而 replace 方法则会用新的路由替换当前的历史记录条目，因此用户不能返回到前一个路由。 3. push 方法可以用于向路由栈中添加新的条目，例如当用户在应用程序中浏览时，您可能希望在路由栈中添加新的条目，以便用户可以返回到前一个页面。而 replace 方法通常用于当用户完成某个操作后需要重定向到新的路由时。 总之，push 方法用于向浏览器历史记录中添加新条目并将其添加到路由栈中，而 replace 方法则用于替换当前的历史记录条目，因此用户不能返回到前一个路由。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值