首页 > 其他分享 >Vue Router系列之(八)router-link 标签的replace属性

Vue Router系列之(八)router-link 标签的replace属性

时间:2024-02-29 20:04:49浏览次数:35  
标签:历史记录 Vue 浏览器 replace link push router

<router-link>的replace属性

  1. 作用:控制路由跳转时操作浏览器历史记录的模式

  2. 浏览器的历史记录有两种写入方式:分别为pushreplacepush是追加历史记录,不破坏栈中的任何一条数据,不断的压入数据,replace是替换掉当前栈顶的那一条记录。路由跳转时候默认为push

    注:浏览器的历史记录实际上是栈。

  3. 如何开启router-link标签的replace模式:<router-link replace .......>News</router-link>

浏览器中的前进和后退按钮是依赖于历史记录的

push模式指的是每次点击一个链接,都会触发一次入栈,并且入栈的数据不会破坏当前栈中的任何一条数据【每一次push操作都会留下痕迹,每一次replace操作都会替换上次操作的记录】

标签:历史记录,Vue,浏览器,replace,link,push,router
From: https://www.cnblogs.com/wzzzj/p/18040062

相关文章

  • Vue Router系列之(七)路由的props配置项
    路由的props配置项​ 路由组件读取其他组件传递的参数时,是通过$route.params.id这种方式读取的,$route.params部分代码冗余度高,如何能够降低这种冗余?props配置项可以做到​ 作用:让路由组件更方便的收到参数{ name:'xiangqing', path:'detail/:id', component:Detail,/......
  • Vue Router系列之(六)命名路由
    命名路由命名路由:给你的路由规则起个名字作用:可以简化路由的跳转【路由层级比较多时】。如何使用给路由规则命名:{ path:'/demo', component:Demo, children:[ { path:'test', component:Test, children:[ {name:'hello'//通......
  • Vue Router系列之(五)路由传参
    路由传参如何给路由组件传递参数点击导航区的时候将数据带给路由组件,展示区根据数据渲染组件,渲染的都是同一个组件,只不过数据不同路由组件可以接收两种参数:query参数和params参数这两种参数的写法与Ajax中query参数和params参数的写法是一样的1.query参数传递参数<!--......
  • Vue Router系列之(十一)两个新的生命周期钩子
    两个新的生命周期钩子​ 缓存路由组件和定时器一起使用时,如果进行了路由跳转,本应触发在beforeDestroy钩子中清除定时器方法,但因为缓存了路由组件,就导致原来的路由组件的beforeDestroy钩子不会被触发,定时器也就不会清除作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态......
  • Vue Router系列之(十)缓存路由组件
    缓存路由组件完善路由的技巧作用:让不展示的路由组件保持挂载,不被销毁。​ 正常情况下,进行了路由跳转后,之前的组件会被销毁,如果之前的组件中存在input框之类的表单类组件,输入的内容也就消失了,也就是说,要保证路由跳转后不销毁之前的组件具体编码://缓存的对象:并不是所有路......
  • 答应我,在vue中不要滥用watch好吗?
    前言上周五晚上8点,开开心心的等着产品验收完毕后就可以顺利上线。结果产品突然找到我说要加需求,并且维护这一块业务的同事已经下班走了,所以只有我来做。虽然内心一万头草泥马在狂奔,但是嘴里还是一口答应没问题。由于这一块业务很复杂并且我也不熟悉,加上还饿着肚子,在梳理代码逻辑......
  • Vue Router系列之(九)编程式路由导航
    编程式路由导航作用:不借助<router-link>实现路由跳转,让路由跳转更加灵活。为什么需要除了<router-link>标签之外实现路由跳转的方式?<router-link>标签最后变为<a>标签,无法实现button按钮的跳转触发路由跳转可能需要异步触发,<router-link>标签也无法实现具体编码://$ro......
  • Vue Router系列之(十二)路由守卫
    路由守卫作用:对路由进行权限控制,满足一定条件才能看到跳转到的路由组件分类:全局守卫、独享守卫、组件内守卫全局守卫://src/router/index.js//router:我们创建的路由器实例//router.beforeEach(function):每一次进行路由跳转之前都会帮我们调用我们传入的函数//全......
  • Vue CLI 系列之(十)webStorage
    webStorage【浏览器本地存储】localStorage和sessionStorage统称为webStorage1.localStorage未登录账号的情况下进行了商品搜索,搜索历史中保存了之前的搜索记录借助浏览器的本地存储可以将数据存到硬盘上,用于缓存数据通过浏览器如何查看浏览器本地存储​ 每个网站都有自己......
  • Vue CLI 系列之(十四)$nextTick
    $nextTick$nextTick这也是一个生命周期​ 如果要实现一个input框点击后进行一些数据修改的操作【这里是指能够引起Vue重新解析模板的数据修改操作,比如修改data中的数据】,然后让该input框获取焦点,该怎么做?//Item组件中有一个input输入框和一个编辑按钮,实现点击按钮后input框显......