router-link的replace属性

最新推荐文章于 2025-02-22 19:02:22 发布

大鼻子cheers

最新推荐文章于 2025-02-22 19:02:22 发布

阅读量243

点赞数

分类专栏： Vue 文章标签： javascript 前端服务器

本文链接：https://blog.youkuaiyun.com/yms869/article/details/127269478

版权

Vue 专栏收录该内容

9 篇文章

订阅专栏

push和replace作用：控制路由跳转时操作浏览器历史记录的模式

浏览器有两个按钮一个是前进，一个是后退他们都是依赖于浏览器的历史记录

这种浏览器的返回键是模式栈的模式特点是一段是封死的。（以下是示意图）

浏览器默认是push模式

问：什么叫push模式呢

答：在数组中有一个在末尾追加数组元素就是push模式他不破坏之前的结果只是追加上去

而除了push模式还有replace模式

最大的特点就是替换掉当前记录

我们来解释一下当前（以下是示意图）

等我们从最上层那个路径回去的时候只能回到8080/#/about 因为之前的被替代了

那我们怎么开启replace模式呢

<router-link :replace=“ture”>  <router-link>
<router-link replace>  <router-link>//简写模式

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

大鼻子cheers

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue2：router-link的replace属性

Brave_heart4pzj的博客

02-25

460

Vue

49. VUE router-link 标签的属性讲解和不通过router-link 实现路由跳转

Bi-Hu的博客

08-12

1246

1.tag 属性 router-link 这个标签如果我们不想让他渲染成 a标签，那么我们就可以 tag 属性，可以自定义渲染成自己想要的组件：可以发现 a 标签渲染成了按钮。 2.replace属性我们发现你点击了router-link 标签然后跳转切换视图的时候，他默认保留历史的即可以前进/后退，那么证明默认用的是 pushState ,我们如果不想让他可以前进、后退...

参与评论您还未登录，请先登录后发表或查看评论

router-link 的replace属性

ykh12345678的博客

05-23

795

作用：控制路由跳转时操作浏览器历史记录的模式浏览器的历史记录有两种方式，分别为push和replace，push是追加历史记录，raplace是替换当前历史记录。路由跳转的默认方是push。如何开启replace模式：在router-link上增加replace属性即可 ...

Vue3 中路由 replace 属性的深度解析与应用

最新发布

m0_57836225的博客

02-22

477

在 Vue3 的项目开发里，路由是构建单页面应用（SPA）不可或缺的部分，它能让页面在不重新加载的情况下实现灵活跳转和视图切换。其中，replace属性在路由使用中起着特殊作用，今天咱们就来深入了解一下。

125_router-link的replace属性

述安的博客

12-09

202

<router-link>的replace属性：作用：控制路由跳转时操作浏览器历史记录的模式浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push 如何开启replace模式：<router-link replace ......>xxxx</router-link> ...

vue2进阶篇：vue-router之缓存路由组件

刘大猫

07-09

2508

vue2进阶篇：vue-router之缓存路由组件

七、【Vue-Router】router-link标签的replace属性

天行健，君子以自强不息

08-07

326

router-link标签的replace属性

Vue学习第30天——router-link的push和replace属性

背心的博客

09-24

519

router-link的push和replace属性详解

router-link怎么使用

weixin_73060959的博客

08-11

1037

是 Vue Router 提供的一个组件，用于在 Vue 应用中创建导航链接。当点击时，它会根据to属性指定的路由地址（或路径名）来导航到对应的页面。这样做的好处是，它可以自动处理 URL 的更新和页面的渲染，而不需要你手动编写 JavaScript 代码来控制这些。

详解如何使用router-link对象方式传递参数？

10-17

在使用router-link标签进行路由跳转时，可以通过to属性来指定目标路由，同时可以传递参数。参数可以通过两种形式传递：query和params。 1. 使用query传递参数的方式如下： ```html <router-link :to="{ name: '...

router-link 的replace属性 + 编程式路由导航

weixin_47075145的博客

10-14

986

1.作用：控制路由跳转时操作浏览器历史记录的模式2.浏览器的历史记录保存在一个栈里面，刚打开浏览器在指针指向栈底。3.浏览器的历史记录有两种写入方式：分别为 push 和 raplace， push 是追加历史记录，replace是替换当前记录。路由跳转时候默认为 push 模式。

Vue知识点：router-link的replace属性

summer_cloudy的博客

03-15

201

【代码】Vue知识点：router-link的replace属性。

【Vue】RouterLink的replace属性

DX390609的博客

07-17

401

2、浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push；简单来说，如果你用的是默认的push，你点击进入到下一个路由的时候可以返回到上一个路由；如果你用的是replace，你点击进入到下一个路由的时候，浏览器左上角不会有返回上一步。3、如何开启replace模式：在RouterLink后加replace即可。1、作用：控制路由跳转时操作浏览器历史记录的模式；

Vue的＜router-link＞的replace属性

yh_zeng2的博客

04-12

385

Vue的<router-link>的replace属性

Vue学习笔记-＜router-link＞的replace的属性

theLuckyLong的博客

12-04

372

是追加历史记录（将浏览的url请求入栈），replace则是替换当前记录。作用：控制路由跳转时操作浏览器历史记录的模式。，前者为简写，后者为全写。

vue router-link的replace属性

Liberty_yes的博客

02-12

770

router-link的replace属性 vue中的replace属性是用来控制浏览器历史记录的

vue的router（二）router-link的replace属性&编程式路由导航&缓存路由组件&两个新的生命周期钩子&路由守卫

weixin_47687315的博客

03-22

1846

1.router-link的replace属性 *给router-link添加replace属性后页签不能后退： 2.编程式路由导航 *作用：不借助router-link实现路由的跳转，让落跳转更加灵活： 3.缓存路由组件 *作用：让不展示的路由组件保持挂载，不被销毁 <keep-alive include='组件的名字'> <router-view></router-view> </keep-alive> ...

vue路由route详解（7）----router-link的replace属性

Canace_Xyxjjcaw的博客

03-28

650

点击router-link会有历史记录，但是记录历史记录的方式是push方式默认开启的是push模式，还有一种模式是replace模式（即替换）

前端vue入门(纯代码)31_route-link的repalce属性

m0_62003092的博客

07-13

367

如果夜里十二点我还回你消息，那么意味着什么，意味着我是真的很喜欢玩手机。

router-link移动

02-07

### Vue Router 使用 `router-link` 实现页面导航 #### 声明式路由跳转在 Vue 中，`<router-link>` 是用于声明式的导航。通过设置其 `to` 属性来指定目标路径或名称。 ```html  <router-link to="/foo">Go to Foo</router-link>  <a href="/foo">Go to Foo</a> ``` 这种方式简单直观，适合大多数场景下的页面间链接创建[^1]。 #### 动态绑定到 props 除了静态定义外，还可以动态地将对象传递给 `to` 属性： ```html  <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>  <router-link :to="{ path: '/register', query: { plan: 'private' }}">Register</router-link> ``` 这使得构建复杂 URL 变得更加灵活方便。 #### 替换当前记录而非添加新历史条目如果希望点击时不增加浏览器的历史栈，则可利用 `replace` 特性： ```html <router-link :to="{ path: '/' }" replace>Home</router-link> ``` 当设置了此选项后，用户不会因为返回按钮而回到前一页[^3]。 #### 自定义激活状态类名为了更好地控制样式，在某些情况下可能需要自定义活动状态下应用的 CSS 类。默认会提供两个类 `.router-link-active` 和 `.router-link-exact-active` 来标记匹配项及其精确匹配版本。对于特定需求，可以通过全局配置更改这些默认值[^2]。 ```javascript const router = createRouter({ history: createWebHistory(), routes, linkActiveClass: "my-custom-class", linkExactActiveClass: "my-exact-custom-class" }); ``` 以上就是关于如何使用 `<router-link>` 组件来进行页面间的平滑过渡以及一些高级特性的说明。