vue-router 不能判断页面是否是返回

最新推荐文章于 2024-11-11 17:37:04 发布

向然

最新推荐文章于 2024-11-11 17:37:04 发布

阅读量1.5w

点赞数 1

分类专栏： javascript 文章标签： vue vue-router

本文链接：https://blog.csdn.net/baidu_32519511/article/details/78665708

版权

本文探讨了在Vue Router中如何有效地判断页面是否是通过返回操作到达的。内容涉及Vue Router的导航守卫及其在处理返回操作时可能遇到的挑战，同时提供了相应的解决方案。

摘要由CSDN通过智能技术生成

 前言： 公司项目使用的是react,最近比较闲，所以打算用vue来写一下。 在写切换动画的时候，发现监听路由变化的时候并不会像react那样会告诉你这个跳转是push 还是back.查看一下vue的官方文档。如下所示。但这并不能解决我的问题。

// watch $route 决定使用哪种过渡
watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}

解决思路；我将页面所有的路由存在sessionStorage中，当路由变化时判断该路由是否已存在，存在就当返回，并清除中间路由，如不存在就当是push操作。下面看代码

watch: {
    '$route'(to, from)
    {
      let routersArr=sessionStorage.getItem('routers')&&sessionStorage.getItem('routers').split(',')||[];
      if(routersArr.length==0){
        routersArr.push(from.path)
        routersArr.push(to.pa