vue跳转后不记录历史记录的问题

目录
  • vue跳转后不记录历史记录
  • vue-router回退不记录历史
    • 场景说明
    • 处理方案
    • 其他api跳转

vue跳转后不记录历史记录

vue路由跳转一般情况下是使用push，

 this.$router.push({
                path: "/testTeam/testTeam",
              
              });

若是特殊需求，页面跳转后不记录到历史记录中，将push改为replace即可

this.$router.replace({path: '/project_selection'})

vue-router回退不记录历史

场景说明

对于单页应用来说，经常会有登录后访问某个页面的场景。比如

/index -> /login -> /page1

但是在page1返回上一页时，会返回到登录页。回退路径为

/page1-> /login -> /index

因此需要进行跳过登录页的历史记录处理。

处理方案

1.router-link + history

<template>
   login页
   <router-link replace to="/page1">登录后访问page1</router-link>
</template>

此时在page1页的回退路径为

/page1 -> /index

2.编程式跳转

<template>
        login页
        <button @click="replaceJump">登录后访问page1</button>
</template>
    
<script setup lang='ts'>
    import {useRouter} from 'vue-router'
    const router = useRouter();
    // 传递全路径跳转
    const replaceJump = ()=>{
        router.replace('/page1')
    }
</script>
    
<style>
    
</style>

结果同上。

其他api跳转

此外，router对象还有其他跳转api使用说明如下

    /**
     * Go back in history if possible by calling `history.back()`. Equivalent to
     * `router.go(-1)`.
     */
    back(): ReturnType<Router['go']>;
    /**
     * Go forward in history if possible by calling `history.forward()`.
     * Equivalent to `router.go(1)`.
     */
    forward(): ReturnType<Router['go']>;
    /**
     * Allows you to move forward or backward through the history. Calls
     * `history.go()`.
     *
     * @param delta - The position in the history to which you want to move,
     * relative to the current page
     */
    go(delta: number): void;

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vuex实现历史记录的示例代码

    vuex实现历史记录的示例代码

    最近自研着一个可视化操作平台,其中涉及到用户操作后可撤销或重做,在网上搜了一些解决思路,完善自己所设想的解决思路. 历史记录需求的要点 可存储在 localStorage 中 可多次撤销或多次重做 点击列表中的一项,将历史倒退或前进至指定位置 看似简单的需求,在基础建设设计上的错误,亦会在未来导致更多的工作量.所以结合上面两点的要求,发现 vuex 的基本思路非常适合完成这个需求,redux 同样. 实现思路 此项目用了 typescript 来加强代码的严谨性,方便日后维护,大家简单看个思路.

  • 使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)

    使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)

    最近在开发一款新的app项目,我自己也是第一次接触app开发,经过团队的一段时间研究调查,决定使用Vue3+Vant前端组件的模式进行开发,vue2开发我们已经用过几个项目了,所以决定这一次尝试使用Vue3来进行前段开发. 我刚开始负责搜索功能的开发,有历史搜索记录的需求,一开始我认为这是记录的存储信息也会放在一个数据库表里面,但经过一番调查,发现并不是这样,而是要存储在本地.但是网上的方法也并没有完全解决问题,经过一番尝试,终于给搞好了,话不多说,直接上效果图. 初始化不显示历史搜索记录 回车

  • vue路由跳转router-link清除历史记录的三种方式(总结)

    目录 路由跳转router-link清除历史记录 官方文档提供了如下三种方式 vue跳转后不记录历史记录 路由跳转router-link清除历史记录 1.在vue项目中说起路由跳转,我们最先想到的就是router-link标签以及this.$router.push函数. router-link和this.\$router.push的实现原理是一样的,在点击router-link时,内部调用的就是this.$router.push. 2.this.\$router.push这个方法会向 histo

  • 在vue中实现禁止回退上一步,路由不存历史记录

    在有些情况下,我们不想往路由里添加历史记录.(vue的项目,vue-router中不想存历史记录) 根据vue官网提供的,楼主总结了一下,主要有以下几种方案: 根据官网的解释 .声明式路由和编程式路由都是添加新的记录,同时vue还提供了replace来替换路由记录,从而实现路由不存历史记录的情况,以下是楼主总结的几种方法: 1.声明式路由 2.编程式 3.原生js实现 楼主晚上回去看了一下<js高程>,原生实现替换路由,不记录历史记录的方法 window.open("http://w

  • Vue 实现输入框新增搜索历史记录功能

    vue实现搜索显示历史搜索记录,采用插件-good-storage 安装插件    npm install good-storage -S 在本地新建cache.js文件,该文件是关于本地存储的逻辑处理(缓存到本地的数据最大缓存15条,并且新的插入在第一位,首先得到当前的存储数据情况,将关键字存到数组中,判断如果数组中有相同的数据,则把重复的数据删除,将新的关键字存入到前面) cache.js 文件中的代码如下 /*把搜索的结果保存下来*/ /*用export把方法暴露出来*/ /*定义存储搜索

  • vue跳转后不记录历史记录的问题

    目录 vue跳转后不记录历史记录 vue-router回退不记录历史 场景说明 处理方案 其他api跳转 vue跳转后不记录历史记录 vue路由跳转一般情况下是使用push,  this.$router.push({                 path: "/testTeam/testTeam",                              }); 若是特殊需求,页面跳转后不记录到历史记录中,将push改为replace即可 this.$router.replace

  • 关于vue跳转后页面置顶的问题

    关于vue跳转后页面置顶的问题

    目录 vue跳转后页面置顶 vue如何实现置顶 vue跳转后页面置顶 今天测试指出我的项目跳转页面时未置顶,嗯,这个太影响用户体验了. 但是办法总会有哒!No Problem! 只需在路径上匹配一段关于scroll方法即可, 我简单截取一段我的代码以作演示: 或者使用这段代码: afterEach (to, from, next) { window.scrollTo(0, 0) } 但是还有个问题依旧没有彻底克服! 比如,如果当前页面是首页,点击页面中的"首页"选项后,却依然不置顶,那

  • vue页面跳转后返回原页面初始位置方法

    vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly即可,scrolly我用的是vuex状态管理器来保存的.整个环境是基于vue-cli搭建的 一.main.js里面配置vuex //引用vuex import Vuex from 'vuex' Vue.use(Vuex) 二.main.js里面vuex状态管理 var store =

  • 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部. 最开始我使用了一个很笨的方法,每个页面上都加上window.scrollTop(0,0);来解决问题,但是这个太繁琐了.最后和小伙伴们商量了一下,在main.js页面上加了这么一段代码 router.afterEach(function (to) { window.scrollTo(0, 0) }) 路由跳

  • vue router 跳转后回到顶部的实例

    在main.js中加上这段代码 // 跳转后返回顶部 router.afterEach((to,from,next) => { window.scrollTo(0,0); }) 以上这篇vue router 跳转后回到顶部的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • vue路由跳转后刷新指定页面的方法

    做项目遇到一个坑:A页面带参跳转到B页面,第二次跳转时的参数与第一次时的参数不同,但是后台查询时还是使用的第一次的参数.需要手动刷新之后,才会使用第二次参数. 鉴于时间原因直接使用刷新页面监听路由的方法.在准备跳转的A页面添加路由跳转监听事件,达到每次A页面跳转B页面时,B页面都会再次重新加载页面. 添加完成后,A页面跳转B页面,B页面成功刷新.正当我高兴的以为又解决了一个bug时,突然发现我从A页面跳转到C页面时,C页面竟然也在发生页面刷新现象.当时着实是将小主吓了一大跳.要知道正是因为要填写

  • vue跳转同一个路由参数不同的问题

    vue跳转同一个路由参数不同的问题

    目录 vue跳转同一个路由参数不同 问题 第一种方法 第二种方法 vue跳转同一路由报错 原因 解决方案 vue跳转同一个路由参数不同 问题 vue项目同一个路由跳转(路由不变,后面参数变化),第一次碰到这个问题的时候,搜了很多文章,大约是第一种解决方案,很顺利解决了. 可是!!!在app上的时候,它地址变了刷新不了!! 第一种方法 window.location.href = 改变参数后的新地址 window.location.reload(); 在app上地址更新但是不刷新!!!然后就有了第

  • 解决vue项目刷新后,导航菜单高亮显示的位置不对问题

    1本人在学vue项目时遇到一个坑.在写vue项目头部导航时,比如点击第三个,刷新后,高亮状态显示在第一个: 现在是点击第三个页面 刷新后,是第一个页面高亮显示,但是因为路由路径没有改变页面内容还是第三个页面内容,改变的是导航的状态: 捯饬了好久才搞出来,伤的不轻,看控制导航状态的代码部分: 在头部组件里面控制导航菜单高亮显示是checkindex,默认值是0,触发点击事件contact时候会重新赋值,跳转路由,一旦刷新页面,这个checkindex的值就是0,所以要把这个checkindex值记

  • vue跳转方式（打开新页面）及传参操作示例

    本文实例讲述了vue跳转方式(打开新页面)及传参操作.分享给大家供大家参考,具体如下: 1. router-link跳转 // 直接写上跳转的地址 <router-link to="/detail/one"> <span class="spanfour" >link跳转</span> </router-link> // 添加参数 <router-link :to="{path:'/detail/two'

  • 解决vue加scoped后就无法修改vant的UI组件的样式问题

    有时候UI组件提供的默认的样式不能满足项目的需要,就需要我们对它的样式进行修改,但是发现加了scoped后修改的样式不起作用. 解决方法: 使用深度选择器,将scoped样式中的选择器"深入",即影响子组件 <style scoped> .a >>> .b { /* ... */ } </style> 以上的代码会编译成: .a[data-v-f3f3eg9] .b { /* ... */ } 注意:如果你使用了Less或Sass等预处理器,可

随机推荐