vue跳转路由和参数都变化，但是页面没有更新

悠悠 2021-09-02 07:51 1010阅读 0赞

1问题描述

页面 A->B 从浏览器回退到 A ,然后 A->C ,然而C 的页面内容是B的，C页面的 路由地址和参数都是对的。

2.解决方法，我是重新刷新一下，但是这个不好有刷新的痕迹。

1）用watch监控 $route 监控不到 ,都是空的

watch:{
      $route(to, from) {
           console.log("----------");
           console.log(to);
           console.log(from);
    
           this.$router.go(0);
        }
    }

2）用  beforeRouteEnter 钩子函数，用watch 监控 data对象中 fullPath 的变化

beforeRouteEnter(to, from, next) {
        next(vm => {
          // 通过 `vm` 访问fetchData，将query参数name，传递过去，进行逻辑处理
          // debugger
          // console.log(to)
          // console.log(from)
          //       console.log(vm.$route); //有值
          //       next()
          if (from.fullPath === "****") {  //关键判断这里区别，自己刷新是 /
            vm.fullpath = from.fullPath;
            this.$router.go(0);
          }
    
          // vm.fetchData(vm.$route.query.name);
        });
      },
    
    
    //监听变化
    watch: {
        fullpath(a, b) {
          this.$router.go(0);
        }
    }
    
    
    //data 对象
     data(){
      fullpath:''
      }

3）借鉴大神的总结

路由及生命周期触发的完整流程

将路由导航、`keep-alive`、和组件生命周期钩子结合起来的，触发顺序，假设是从a组件离开，第一次进入b组件：

1.  `beforeRouteLeave`:路由组件的组件离开路由前钩子，可取消路由离开。
2.  `beforeEach`: 路由全局前置守卫，可用于登录验证、全局路由loading等。
3.  `beforeEnter`: 路由独享守卫
4.  `beforeRouteEnter`: 路由组件的组件进入路由前钩子。
5.  `beforeResolve`:[路由全局解析守卫][Link 1]
6.  `afterEach`:路由全局后置钩子
7.  `beforeCreate`:组件生命周期，不能访问`this`。
8.  `created`:组件生命周期，可以访问`this`，不能访问dom。
9.  `beforeMount`:组件生命周期
10. `deactivated`: 离开缓存组件a，或者触发a的`beforeDestroy`和`destroyed`组件销毁钩子。
11. `mounted`:访问/操作dom。
12. `activated`:进入缓存组件，进入a的嵌套子组件(如果有的话)。
13. 执行beforeRouteEnter回调函数next。

虽然可以解决了 但是刷新不好，如有好的方法，欢迎大神留言！

[Link 1]: https://links.jianshu.com/go?to=https%3A%2F%2Frouter.vuejs.org%2Fzh%2Fguide%2Fadvanced%2Fnavigation-guards.html%23%25E5%2585%25A8%25E5%25B1%2580%25E8%25A7%25A3%25E6%259E%2590%25E5%25AE%2588%25E5%258D%25AB