跳转同一个路由报错,希望跳转同一个路由刷新页面
在做官网时,点击顶部导航栏或者底部的目录栏进行路由跳转页面切换时,多次点击同样的路由会报错。
现在需要的效果是,点击同样的导航不报错,并且刷新页面
顶部导航栏是通过element组件el-menu来实现的通过组件的属性进行路由跳转,底部是同步点击事件触发this.$router.push('path')
实现的
-
方法一
如果要点击不报错可以通过当前路由this.$route.name
与要跳转的path
来进行判断,如果相同则不触发路由跳转。这样可以实现点击相同的导航栏步报错,直接拦截了路由跳转事件。
但是现在要现在点击相同的导航不会刷新页面 -
方法二
this.$router.push({
path: path,
query: {
//Date.now()时间戳一串数字 当前时间
t: Date.now()
}
})
<el-main>
<!-- :key="$route.query.t"每次根据不同时间戳来刷新页面 -->
<router-view :key="$route.query.t"/>
</el-main>
通过这个方式就可以点击相同路由跳转不报错,并且刷新页面,但是这个页面url上面会带着时间
其实这个也无伤大雅
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了