zoukankan      html  css  js  c++  java
  • vue当前路由跳转初步研究

      一样闲话少说,直接上问题,如图:

      也是消息面板,没想到一个小小的消息面板,碰到这么多坑,惆怅。

      就是如果当前路由和跳转路由不一样时,正常跳转没有任何问题。但是如果一样时,就不会跳转了,用了很多方法,比如给router-view加key,beforeRouterLeave,watch路由等都没有效果。这个路由跳转用的是params形式

    <router-link :to="{
      name:item.route,
      params:{
        messageId:item.rid
      }
    }"></router-link>

      我在路由的beforeRouterLeave,beforeEach加断点,发现根本就不会走进去。后来自己胡乱猜测了一下,是不是虽然是params变了,但是路由name根本一点没变,所以路由根本就不动。但是一直又有个疑问,为什么下面这样计算属性,随route的params变化,都不起作用,完全进不了这个方法,watch也是类似,希望大神看到可以指点一二。

     computed:{
        activeQuery(){
          return this.$route.params + new Date()
        }
      }

      后来想着换个方式,换query试试,因为query后面会跟  ?aa=22  类似的东西,想着这样是不是就能变化。

      首先浏览器渲染加了参数

      beforeEach也会走进去,我们看下to和from区别:可以看到name一样,path一样,但是fullPath不一样

      多看一个:可以看到同样也是name一样,path一样,但是fullPath不一样

      然后我们每次也会走进计算属性那个方法

      这样其实就可以看到,我们的问题基本解决了。

      所以总结一下:大胆猜测,路由的跳转看的就是fullPath,fullPath不变化,就不会跳转。fullPath变化,都会触发跳转

      所以我们再试一下,继续点481,发现确实一点debugger都没有了。

      然后就是router-view的key:无key的话,路由复用不加载;有key的话,重新加载

    <router-view :key="activeQuery"></router-view>
    
    computed:{
      activeQuery(){
        return this.$route.query + new Date()
      }
    }
  • 相关阅读:
    C编程规范
    c# 闭包 小例
    计算前后2行的时间差
    判断是不是奇数
    条件表达式工具类
    代码重构-5 取消类的私有变量(实例变量)
    代码重构-4 通用方法 用 static
    代码重构-3 用Tuple代替 out与ref
    代码重构-2 简单不变的 if else 用字典代替
    代码重构-1 对参数中有 bool值的拆分
  • 原文地址:https://www.cnblogs.com/goloving/p/9206409.html
Copyright © 2011-2022 走看看