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

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

  就是如果当前路由和跳转路由不一样时,正常跳转没有任何问题。但是如果一样时,就不会跳转了,用了很多方法,比如给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()
  }
}

vue当前路由跳转初步研究的更多相关文章

  1. Vue.之.路由跳转

    Vue.之.路由跳转 在进行项目开发的过程中,需要使用路由进行跳转.如下: // 不带有参数,在页面上跳转到别的页面 1. this.$router.push('/login/init');  // ...

  2. Vue之路由跳转 传参 aixos 和cookie

    一.路由跳转 1.1 项目的初始化 vue create m-proj   >>>创建vue项目 精简vue项目的 views 视图   About(基本是删除的) Home.(可以 ...

  3. vue设置路由跳转参数,以及接收参数

    最近做Vue项目,遇到了一个路由跳转问题:首页要跳转到项目页指定的Tab选项卡项,一开始总是跳到默认项.解决方法如下: 在跳转链接处设置了路由跳转参数,如下: <router-link  :to ...

  4. vue二级路由跳转后外部引入js失效问题解决方案

    vue路由可以通过children嵌套,于是可以形成二级路由等等... 案例如下: routes: [ { path: '/', name: 'dy', component: dy, children ...

  5. vue -- router路由跳转错误 , NavigationDuplicated

    vue-router ≥3.0版本回调形式以及改成promise api的形式了,返回的是一个promise,如果路由地址跳转相同, 且没有捕获到错误,控制台始终会出现如图所示的警告 (注:3.0以下 ...

  6. vue router路由跳转了,但是页面没有变(已解决)

    小白学习 router.js:两个组件之间跳转 但是路由变了,页面没有改变的原因是因为app.vue里面没有router-view(很关键)

  7. Vue.js路由跳转带参数到模板组件。

    从SalesOrderQuery组件跳到SalesOrder组件,并且通过params属性携带数据. handleClick(row) { //alert(row.FSaleName);//获取该行F ...

  8. vue 项目路由跳转后显示不同的title

    1.在router/index.js的每个路由中配置title 2.在项目中运行命令 npm install vue-wechat-title --save 安装插件(在 package.json文件 ...

  9. vue axios路由跳转取消所有请求 和 防止重复请求

    直接上干货 在发送第二次请求的时候如果第一次请求还未返回,则取消第一次请求,以保证后发送的请求返回的数据不会被先发送的请求覆盖. 或者是跳转路由的时候取消还未返回的请求 第一步: axios 怎么取消 ...

随机推荐

  1. JAVAEE——SpringMVC第二天:高级参数绑定、@RequestMapping、方法返回值、异常处理、图片上传、Json交互、实现RESTful、拦截器

    1. 课前回顾 https://www.cnblogs.com/xieyupeng/p/9093661.html 2. 课程计划 1.高级参数绑定 a) 数组类型的参数绑定 b) List类型的绑定 ...

  2. [ 转载 ] Java基础13--equals方法

    一.equals方法介绍 1.1.通过下面的例子掌握equals的用法 1 package cn.galc.test; 2 3 public class TestEquals { 4 public s ...

  3. 怎么处理stdClass::__set_state

    处理后 处理方法 function object2array_pre(&$object) { if (is_object($object)) { $arr = (array)($object) ...

  4. UOJ275 组合数问题

    给定n,m和k,求有多少对(i , j)满足0 ≤ i ≤ n, 0 ≤ j ≤ min(i ,m)且C(︀i,j)︀是k的倍数.n,m ≤ 1018, k ≤ 100,且k是质数. 把i和j都看成k ...

  5. BZOJ 3572: [Hnoi2014]世界树 虚树 树形dp

    https://www.lydsy.com/JudgeOnline/problem.php?id=3572 http://hzwer.com/6804.html 写的时候参考了hzwer的代码,不会写 ...

  6. 6.13校内互测 (DP 带权二分 斜率优化)

    丘中有麻plant 改自这儿,by ZBQ. 还有隐藏的一页不放了.. 直接走下去的话,如果开始时间确定那么到每个点的时间确定,把time减去dis就可以去掉路程的影响了. 这样对于减去d后的t,如果 ...

  7. 【BFS】【最小生成树】Petrozavodsk Winter Training Camp 2018 Day 1: Jagiellonian U Contest, Tuesday, January 30, 2018 Problem G. We Need More Managers!

    题意:给你n个点,点带权,任意两点之间的边权是它们的点权的异或值中“1”的个数,问你该图的最小生成树. 看似是个完全图,实际上有很多边是废的.类似……卡诺图的思想?从读入的点出发BFS,每次只到改变它 ...

  8. windows提权的几种姿势

    想象这种画面:你拿到了一台机器上Meterpreter会话了,然后你准备运行 getsystem 命令进行提权,但如果提权没有成功,你就准备认输了吗?只有懦夫才会认输.但是你不是,对吗?你是一个勇者! ...

  9. Apache2.4使用require指令进行访问控制--允许或限制IP访问/通过User-Agent禁止不友好网络爬虫

    从Apache2.2.X到Apache2.4.X,在配置上稍微有点不同,需要特别注意.现在记录下关于访问控制的配置. 经过苦苦搜索,终于配置成功.参考了这篇文章:http://www.cnblogs. ...

  10. bzoj1503 Splay 维护名次数,支持删除

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1503 题解: 维护一颗Splay和一个外部变量,树中每个节点表示一个人,节点权值a + 外部变 ...