vue router 两种跳转push和replace对比区别

最新推荐文章于 2024-04-28 13:49:25 发布
最新推荐文章于 2024-04-28 13:49:25 发布
阅读量603 收藏 1
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44447255/article/details/120447212
版权
Vue Router的`router.push`和`router.replace`主要区别在于历史记录处理，前者添加记录，后者替换记录。传参方式包括query和params，其中query在地址栏可见，适合不敏感数据；params隐式传参，刷新后可能丢失。params作为路由的一部分，若路由定义了params但跳转未提供，可能导致问题。通过`this.$route.query`或`this.$route.params`获取参数。
摘要由CSDN通过智能技术生成

router.push(location) 会向 history 栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之前的 URL。

 

router.replace(location) 它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

 

 传参的两种方式

   1.使用query

    2.使用params

 两者传参的区别是：

     1.query 传参配置的是path,而params传参配置的是name,在params中配置path无效

     2.query在路由配置时不需要设置参数，而params必须设置(如果不设置刷新后参数丢失)

     3.query传递的参数会显示在地

最低0.47元/天 解锁文章
棠樾
关注
专栏目录
vue-router——重定向-redirect、过渡动画、路由钩子
qq_35574727的博客
08-07 9983
一.vue-router的重定向-redirect 有时候设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。 redirect基本重定向 我们只要在路由配置文件中（/src/router/index.js）把原来的component换成redirect参数就可以了。我们来看一个简单的配置。 export defa...
Vue学习第30天——router-link的push和replace属性
背心的博客
09-24 480
router-link的push和replace属性详解
vue路由之replace（无痕浏览）属性
men_ma的博客
08-17 3759
转载请标明出处：https://blog.csdn.net/men_ma/article/details/106847165. 本文出自 不怕报错 就怕不报错的小猿猿 的博客 vue路由前言1.SPA是什么2. SPA实现思路和技术点3.路由思路4.通过vue的路由可实现多视图的单页Web应用(基于html的SPA)4.1 引入依赖库4.2 创建自定义组件，例如：Home和Abort组件4.3 定义路由(即路线)4.4 创建路由器实例,然后传 `routes` 配置4.5 创建和挂载根实例。4..
Vue-router07 导航跳转push、replace、go
bagamaka的博客
03-27 987
声明式导航（点击链接）：普通网页中点击<a> 链接、vue 项目中点击<router-link> 都属于声明式导航 编程式导航（调用API方法）：普通网页中调用location.href 跳转到新页面的方式 ①this.$router.push('hash 地址') 跳转到指定hash 地址，并增加一条历史记录②this.$router.replace('hash 地址') 跳转到指定的hash 地址，不增加历史记录并替换掉当前的历史记录 ③this.$...
vue window.location.replace替换之后又自动跳回去
tan47325的博客
06-13 2179
vue window.location.replace替换之后又自动跳回去
vue-router入门（2）—— 命名视图，重定向和别名，router.push()，router.replace(),router.go()
热门推荐
我不是水哥
09-04 1万+
  关于vue-router的入门，个人感觉官网的东西写的有点乱，所以打算整理一些场景搭配使用。所以可能会漏掉一些个人觉得几乎用不到的功能。有兴趣的可以去官网看完整版。 1.命名视图 需求：首页的头部比较特殊，我们以颜色区分，首页可能需要用到一个绿色的header，其他页面的头部则用红色的header。我们通过命名视图（name），来设置不同的路由中用不同的header和main模板。 用命...
vue-router 2.0 跳转之router.push()用法说明
10-14
在 Vue Router 2.0 版本中，`router.push()` 是一个核心方法，用于程序化地导航到新的 URL。这个方法使得开发者能够在运行时动态改变应用的视图，而不必依赖用户交互或 HTML 的 `<a>` 标签。 `router.push(location...
Vue Router中的replace与路由守卫
最新发布
yxh_live的博客
04-28 2225
Vue Router中的replace与路由守卫
Vue Router中redirect的使用方法
weixin_62353876的博客
11-08 4008
当你给路由配置添加 `redirect` 属性时，它会告诉 Vue Router，如果访问了当前路径（`path`），则应该立即重定向到 `redirect` 指定的路径。在你提供的路由配置中，当你加上 `redirect: 'index'` 时，它表示如果用户访问了当前路由路径（`path: ''`），即根路径，那么会被重定向到 `index` 路径，这是你的默认路径。如果你希望根路径被访问时自动跳转到 `index` 路径，就添加 `redirect`，否则不添加。
vue-router（路由的两种工作模式、router-link的replace属性、编程式路由导航、缓存路由组件keep-alive、路由守卫【全局路由守卫、独享路由守卫、组件内路由守卫】）（十二）
qq_48617322的博客
09-13 851
vue-router（路由的两种工作模式、router-link的replace属性、编程式路由导航、缓存路由组件keep-alive、路由守卫【全局路由守卫、独享路由守卫、组件内路由守卫】）（十二）
vue 中router.go，.push和.replace的区别
qq_37875903的博客
07-21 757
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
js 页面刷新location.reload和location.replace的区别小结
hsany330的专栏
05-18 1032
首先介绍两个方法的语法：  reload 方法，该方法强迫浏览器刷新当前页面。  语法： location.reload([bForceGet])  参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5("刷新")  replace 方法，该方法通过指定URL替换当前缓存在历
vue常用路由router之“push和replace”
空投在我怀里的博客
03-11 1万+
一、<router-link>push是追加历史记录，replace是替换当前记录 作用：控制路由跳转时操作浏览器历史记录的模式 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push 如何开启replace模式：<router-link replace .......>News</router-link> 二、案列展示： 1.案列1 <template>
vue的跳转方式——window.open & router-link标签 & this.$router.push跳转 & this.$router.replace跳转 & this.$route
weixin_44867717的博客
09-27 5460
vue的跳转方式——window.open & router-link标签 & this.KaTeX parse error: Expected 'EOF', got '&' at position 15: router.push跳转 &̲ this.router.replace跳转 & this.$route 1、普通跳转（跳转的是路由） const {href} = this.$router.resolve({ name: "newDate",//这里
【Vue路由】props配置、replace属性、编程式路由导航、缓存路由组件
十八岁讨厌编程的博客
01-03 1272
本文涉及props配置、router-link的replace属性、编程式路由导航、缓存路由组件等内容
vue-router 学习
weixin_43873495的博客
04-29 175
vue-router 介绍、使用 Vue Router 是 Vue.js 官方的路由管理器 功能 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js transition组件的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级 自定义的滚动条行为 路由懒加载的使用...
Vue中路由的query参数+命名路由+路由中的params参数+路由中的props配置+router-link的replace属性+全局前置路由守卫的使用，尚硅谷Vue系列教程学习笔记（13）
weixin_43749999的博客
09-02 903
尚硅谷Vue系列教程学习笔记（13），本文主要包含如下内容： 121-路由的query参数 122-命名路由 123-路由中的params参数 124-路由的props配置 125-router-link的replace属性 126-编程式路由导航 127-缓存路由组件 128-两个新的生命周期钩子 129-全局前置-路由守卫 130-全局后置-路由守卫
Vue——vue中replace路由替换写法
qq_43201350的博客
10-08 6430
Vue——vue中replace路由替换写法
vue路由跳转push和replace
03-17
Vue.js 中的路由跳转有两种方式：push 和 replace。 - push 方式会在浏览器的历史记录中新增一条记录，用户可以通过浏览器的前进和后退按钮来导航。 - replace 方式会替换掉当前的历史记录，用户无法通过浏览器的前进和后退按钮来导航。 在组件内使用方法: this.$router.push('/path') this.$router.replace('/path') 你可以根据需要选择 push 或 replace 方式来跳转路由。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值