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()
      }
    }
  • 相关阅读:
    (简单) POJ 3414 Pots,BFS+记录路径。
    (简单) POJ 3087 Shuffle'm Up,枚举。
    (简单) POJ 3126 Prime Path,BFS。
    (简单) POJ 1426 Find The Multiple,BFS+同余。
    (简单) POJ 3279 Fliptile,集合枚举。
    (简单) POJ 1278 Catch That Cow,回溯。
    (简单) POJ 2251 Dungeon Master,BFS。
    (简单) POJ 1321 棋盘问题,回溯。
    回溯---输出二叉树中所有从根到叶子的路径
    回溯---在矩阵中寻找字符串
  • 原文地址:https://www.cnblogs.com/goloving/p/9206409.html
Copyright © 2011-2022 走看看