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

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:路由全局解析守卫
  6. afterEach:路由全局后置钩子
  7. beforeCreate:组件生命周期,不能访问this
  8. created:组件生命周期,可以访问this,不能访问dom。
  9. beforeMount:组件生命周期
  10. deactivated: 离开缓存组件a,或者触发a的beforeDestroydestroyed组件销毁钩子。
  11. mounted:访问/操作dom。
  12. activated:进入缓存组件,进入a的嵌套子组件(如果有的话)。
  13. 执行beforeRouteEnter回调函数next。

 

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


版权声明:本文为xinxin_zhu原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。