Vue · 浏览器history路由栈

最新推荐文章于 2023-08-28 14:13:14 发布
最新推荐文章于 2023-08-28 14:13:14 发布
阅读量3k 收藏
点赞数
分类专栏： Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42091247/article/details/120266470
版权

history也没有直接清空路由栈的方法，所以只能手动清空路由栈，代码如下：

let backlen=history.length-1;
history.go(-backlen);

这段代码大家都可以看懂，其实所谓的跳到A页面其实是回退到A页面，将history中的路由栈回退掉，简单还不容易出错，backlen的数值大家可以根据自己的需求减几；

梦想退休的许小姐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue源码解读之vue-router路由
01-08
前言 通过B站视频和一些童鞋的文章结合GitHub源码阅读来理解路由的实现原理 看过前章vuex状态管理的分享之后，相信对路由这块也是非常感兴趣的，同样的模式，同样的方式，我们走进GitHub之vue-router 同样直接走进 src components：route-link 组件 和 router-view 组件 实现 history：关于浏览器相关，包含 hash模式 , basic模式 ，html5模式 以及非浏览器模式以及go 、push 、replace 、back 等各自的处理方法 util：不用多说，各种工具方法 create-mathcher： 这个就比较重要的了，创建
Vue路由跳转问题记录详解
12-09
最近项目上需要用Vue用来做app，在Vue中使用路由时遇到下面的问题。 路由设置如下： { path:'/tab', component:Tab, children:[{ path:'layoutList', name:'LayoutList', component:LayoutList },{ path:'layoutView/:layoutId', name:'LayoutView', component:LayoutView },{ path:'layoutDetail/:viewId', name:'LayoutDetail', component:LayoutDetail }]
vue监听浏览器原生返回按钮,进行路由转跳操作
01-18
今天测试给我报了个bug说点击浏览器返回页数据显示的不对，我查了半天原因：需要监听浏览器的回退按钮，并阻止其默认事件。 具体操作方法如下： 1、挂载完成后，判断浏览器是否支持popstate mounted(){ if (window.history && window.history.pushState) { history.pushState(null, null, document.URL); window.addEventListener('popstate', this.cancel, false); } }, 2、页面销毁时，取消监听。否则其他vue路由页面也会
history html5 清除,Vue路由去除#，HTML5_History_模式
weixin_31261145的博客
06-18 844
H需朋者说上事是础一发一开程和开数的目前间TML5 Histor新直能分支调二浏页器朋代说，事刚y 模式vue-ro一很等指似很一者下插近直好一的的有段文，uter 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载调代求学功解宗维如请框总行断随以移泉动实使时近用码的会能,，护小求架结商的机我动水画现用还近用码的会能,，护小求...
js,JS,清空浏览器的（console.log）打印信息,清空日志，
zg132922的博客
07-07 662
然后：在 console.clear(),有许多的方法 自行 console.log(console)首先，先把浏览器控制台自带的（保留日志功能去掉）
vue清除路由历史记录
maple_leaf_red的博客
07-13 2万+
vue清除路由历史记录
vue清空动态路由（路由历史）
高宇辰
07-15 4251
网上流传了很多清空路由记录的方法，都不彻底，甚至绝大部分都无法实现清空的功能！这个回答是唯一能解决你的问题的回答。分享我最近做的一个后台项目，里面的侧边栏用动态路由生成的，但是会遇到路由重复添加这样的问题，想要解决这个问题的话其实很简单，就是再添加动态路由之前先清空路由，话不多说上代码。在需要清空的路由的地方执行以下代码就可以了。
浏览器清空页面栈的方法
qq_43770447的博客
06-18 7110
浏览器清空页面栈的方法 var backlen = history.length - 1; history.go(-backlen); // Return at the beginning history.replaceState({}, null, '../index.html'); 在vue的页面中需要加一个定时器 setTimeout(function（）{ var
跳转到新页面并清除当前页面的history记录
热门推荐
Mr.Tang的博客
03-22 2万+
History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录，通过history方法触发前进后退 通常使用的方式： window.location.href='index.html' // 或者 window.location.replace('index.html') 使用场景：比如别人访问你得网站 不想回退的时候一步一步回，就需要避免访问你得页面的时候产生history历史记录。 解决办法：清除历史记录 window.history.replaceState() 对当前history
在vue中阻止浏览器后退的实例
10-16
今天小编就为大家分享一篇在vue中阻止浏览器后退的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue+router路由跳转不起作用的一项原因
11-20
Vue.use(Router) export default new Router({ mode:'history', routes: [ { path: '/', component: Login }, { path: '/login', component: Login }, { path: '/register',component: Register}, {path: '/*', ...
vue-router路由模式详解(小结)
12-03
一、路由模式解析 要讲vue-router的路由模式...这其实是借助了浏览器的History API来实现的，这样可以使得页面跳转而不刷新，页面的状态就被维持在浏览器中了。 vue-router中默认使用的是hash模式，也就是会出现如下的U
vue router 删除历史记录
sumimg的博客
08-28 2131
总结一下这种方法的步骤：1，在Vue Router的守卫中保存即将跳转的路由对象的路径到sessionStorage中。,2，当需要清除历史记录时，从sessionStorage中获取之前保存的路径，使用“replaceState”方法将当前的历史记录替换为该路径的历史记录。3，暴露一个API接口，供用户调用清除历史记录的方法。
清除历史记录栈
weixin_66892551的博客
06-21 369
router.go(window.history.state.position) 将用户导航到初始页面并从历史记录栈中移除所有路由。
Vue--router路由跳转
爱吃棉花糖#的博客
12-20 804
Vue--router路由跳转
JavaScript 隐秘者 | Console.xxx竟然如此好用
贤哲XianZhe的博客
12-29 1635
除了平时用起来比较频繁的.log()、.warn()、.error()、.dir()方法，不妨可以再试试.count()、.group()、等，都是很实用方便的控制台接口，浏览器为了能够让开发者开发起来更轻松想了很多办法，合理运用这些接口能够在开发调试过程中如虎添翼。火狐浏览器对消息等级是分的比较细，如果要对不同的消息类型进行明显区分，不妨试试火狐浏览器。
Vue · scroll：监听滚动
weixin_42091247的博客
10-20 6010
滚动 监听页面滚动 在mounted中进行监听滚动： mounted () { window.addEventListener('scroll', this.scrollToTop) }, 在方法中定义监听滚动执行的方法： scrollToTop() { 　　var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; 　　console.log(sc
Vue · for循环：遍历对象、遍历对象数组
weixin_42091247的博客
10-20 3878
Document <div id="app"> <!-- 对象遍历 --> <div v-for="(value, key, index) in object"> {{ index }}. {{ key }} - {{ value }} </div> <!-- 数组对象遍历 --> <div v-for=...
Vue · @click点击事件：阻止事件冒泡、取消默认事件
weixin_42091247的博客
11-29 3672
一般情况下绑定事件方法的： <div class="parent-wrapper" @click="clickWrapper">点这里</div> 阻止事件冒泡方法： <div class="parent-wrapper" @click.stop="clickWrapper">点这里</div> 取消默认事件方法： <div class="parent-wrapper" @click.prevent="clickWrapper">点这里<
springboot vue history路由
最新发布
09-08
Spring Boot 是一个用于构建 Java 应用程序的开发框架，而 Vue 是一个流行的 JavaScript 框架，用于构建用户界面。在使用 Spring Boot 和 Vue 开发应用程序时，你可以使用 Vue 的 history 路由模式来实现前端路由。 Vue 的 history 路由模式允许在不刷新页面的情况下进行路由切换。它依赖于 HTML5 的 history API，可以通过修改浏览器的 URL 来实现路由切换。相比于 hash 路由模式，history 路由模式的 URL 看起来更加友好，没有 "#" 符号。 要在 Spring Boot 中使用 Vue 的 history 路由模式，你需要进行以下步骤： 1. 在 Vue 项目中配置 history 路由模式。可以通过在 `router/index.js` 文件中添加 `mode: 'history'` 来启用 history 模式。 ```javascript import Vue from 'vue' import Router from 'vue-router' import Home from '@/views/Home.vue' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'Home', component: Home }, // 其他路由配置... ] }) ``` 2. 配置 Spring Boot 后端来支持 history 路由模式。在 Spring Boot 中，你可以通过配置 `WebMvcConfigurer` 来处理前端路由。 ```java @Configuration public class WebMvcConfig implements WebMvcConfigurer { @Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController("/{spring:\\w+}") .setViewName("forward:/"); registry.addViewController("/**/{spring:\\w+}") .setViewName("forward:/"); registry.addViewController("/{spring:\\w+}/**{spring:?!(\\.js|\\.css)$}") .setViewName("forward:/"); } @Override public void configurePathMatch(PathMatchConfigurer configurer) { configurer.setUseSuffixPatternMatch(false); } } ``` 上述代码中的 `WebMvcConfig` 类配置了三个视图控制器，将所有匹配到的 URL 都转发到根路径，以便 Vue 的路由能够处理。`configurePathMatch` 方法用于禁用后缀模式匹配。 通过上述配置，当在 Vue 中使用 history 路由切换时，Spring Boot 会将前端路由的请求转发到 Vue 的入口，然后 Vue 会根据配置的路由规则进行相应的展示。 希望以上信息对你有所帮助！如果你还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值