vue清除路由历史记录

2024-04-17 12:24:20

vue清除路由历史记录

为什么要清除路由历史记录
路由跳转
- push
- replace
清除路由历史记录

为什么要清除路由历史记录

1、在公众号H5的开发（使用vue + vant）中，我不想往路由增加历史记录。
2、从A页面→B页面→C页面，直接返回A页面

路由跳转

push

router.push(location, onComplete?, onAbort?)

声明式	编程式
`<router-link :to="...">`	`router.push(...)`

1、this.$router.push("/HomePage");或this.$router.push({ path: "/HomePage" });向 history 栈增加一条记录
2、this.$router.push({ path: "/HomePage", replace: true });并不增加 history 记录而是替换当前的 history 记录

replace

router.replace(location, onComplete?, onAbort?)

声明式	编程式
`<router-link :to="..." replace>`	`router.replace(...)`

1、this.$router.replace({ path: "/HomePage" });并不增加 history 记录而是替换当前的 history 记录

清除路由历史记录

1、A页面→B页面，回到A页面。相当于返回上一页this.$router.go(-1);
2、A页面→B页面→C页面，回到A页面，再点返回键不会回到A、B、C这些页面。实际项目中这种情况出现的比较多。
对于知道层数的我们可以使用router.go(n)，即

this.$router.go(-2);

我们可以使用这种方法返回到 history 栈中的指定页面（已知页面，知道回到那个页面需要点返回键的次数）

像不知道多少层的我们可以像下面这样，可用于在较深的页面回到首页

let backlen = window.history.length - 1;
window.history.go(-backlen);
this.$router.replace({ path: '/HomePage' });

3、A页面→B页面→C页面，点返回键到A页面。
在B页面→C页面的时候使用this.$router.replace({ path: C页面路由 });这个时候相当于 history 栈上之后A页面和C页面，A页面就是C页面的上一个页面，所以就实现了点返回键回到A页面

我们也可以用原生的方法来替换，实现同等效果
window.location.href = "http://localhost:8080/HomePage";增加 history 记录
window.location.replace("http://localhost:8080/HomePage");替换 history 记录
window.history.go(-1);返回上一页

vue清除路由历史记录相关推荐

java游戏spa,【Vue的路由，SPA概念】
前言本章是为了以后实现前端页面的搭建而写的, 重点在于如何实现单页Web应用因为相对于以前的传统多页面web,有很大的缺陷. 那么就必须了解一下Vue的路由设置. SPA的概念总的而言,我们知 ...
Vue day06 路由
Vue day06 路由补充父传子props的约束条件: 父传子:子接收用对象方式,那么可以增加约束条件在child.vue中props: {msg:{// 必填项required:true,/ ...
Vue的路由实现原理解析（最清晰）
Vue的路由实现原理解析(最清晰) 一般源码中,都会用到 window.history 和 location.hash history 实现 window.history 对象包含浏览器的历史,win ...
vue react 路由history模式刷新404问题解决方案
vue react 路由history模式刷新404问题解决方案参考文章: (1)vue react 路由history模式刷新404问题解决方案 (2)https://www.cnblogs.co ...
vue的路由与es6的import, export
vue主要用来实现前端模块化编程, 它的最终代码是一些序列化的js,简单的index.html访问入口,和一些image, vue的js使用es6来模块化设计, 为什么要这么做呢,我想主要是为了前端与 ...
vue 打包路由报错_Vue下路由History模式打包后页面空白的解决方法
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往 ...
vue.js路由配置vue-router的基础学习 - 概念篇
文章目录引言 · 相关问题小结: 一.动态路由匹配 (两种情况) A. 两种情况,代码对比: B. 两种情况,效果图对比: C. 提醒 · 仔细体会: D. 优先级的问题: 二.嵌套路由引言 · ...
Vue 切换路由后页面回到页面顶部
Vue 切换路由后页面回到页面顶部 backTop() {window.scrollTo(0, 0)document.body.scrollTop = 0document.documentElemen ...
【Vue】路由Router嵌套的实现及经典案例
Vue 中路由在使用的时候嵌套使用是非常频繁的,所以本文我们就来通过案例介绍一下嵌套路由的使用. Vue路由嵌套先来准备一个普通的路由案例: <!DOCTYPE html> < ...
vue二级路由跳转后外部引入js失效问题解决方案
vue二级路由跳转后外部引入js失效问题解决方案参考文章: (1)vue二级路由跳转后外部引入js失效问题解决方案 (2)https://www.cnblogs.com/LittleT/p/9077 ...

最新文章

热门文章