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

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

1问题描述

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

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

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

  1. watch:{
  2.   $route(to, from) {
  3.        console.log("----------");
  4.        console.log(to);
  5.        console.log(from);
  7.        this.$router.go(0);
  8.     }
  9. }

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

  1. beforeRouteEnter(to, from, next) {
  2.     next(vm => {
  3.       // 通过 `vm` 访问fetchData，将query参数name，传递过去，进行逻辑处理
  4.       // debugger
  5.       // console.log(to)
  6.       // console.log(from)
  7.       //       console.log(vm.$route); //有值
  8.       //       next()
  9.       if (from.fullPath === "****") {  //关键判断这里区别，自己刷新是 /
  10.         vm.fullpath = from.fullPath;
  11.         this.$router.go(0);
  12.       }
  14.       // vm.fetchData(vm.$route.query.name);
  15.     });
  16.   },
  19. //监听变化
  20. watch: {
  21.     fullpath(a, b) {
  22.       this.$router.go(0);
  23.     }
  24. }
  27. //data 对象
  28.  data(){
  29.   fullpath:''
  30.   }

3）借鉴大神的总结

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

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

  1. beforeRouteLeave:路由组件的组件离开路由前钩子，可取消路由离开。
  2. beforeEach: 路由全局前置守卫，可用于登录验证、全局路由loading等。
  3. beforeEnter: 路由独享守卫
  4. beforeRouteEnter: 路由组件的组件进入路由前钩子。
  5. beforeResolve:路由全局解析守卫
  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。

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

发表评论

表情：
评论列表 （有 0 条评论，1073人围观）

还没有评论，来说两句吧...

相关阅读