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()
}
}
vue当前路由跳转初步研究的更多相关文章
- Vue.之.路由跳转
Vue.之.路由跳转 在进行项目开发的过程中,需要使用路由进行跳转.如下: // 不带有参数,在页面上跳转到别的页面 1. this.$router.push('/login/init'); // ...
- Vue之路由跳转 传参 aixos 和cookie
一.路由跳转 1.1 项目的初始化 vue create m-proj >>>创建vue项目 精简vue项目的 views 视图 About(基本是删除的) Home.(可以 ...
- vue设置路由跳转参数,以及接收参数
最近做Vue项目,遇到了一个路由跳转问题:首页要跳转到项目页指定的Tab选项卡项,一开始总是跳到默认项.解决方法如下: 在跳转链接处设置了路由跳转参数,如下: <router-link :to ...
- vue二级路由跳转后外部引入js失效问题解决方案
vue路由可以通过children嵌套,于是可以形成二级路由等等... 案例如下: routes: [ { path: '/', name: 'dy', component: dy, children ...
- vue -- router路由跳转错误 , NavigationDuplicated
vue-router ≥3.0版本回调形式以及改成promise api的形式了,返回的是一个promise,如果路由地址跳转相同, 且没有捕获到错误,控制台始终会出现如图所示的警告 (注:3.0以下 ...
- vue router路由跳转了,但是页面没有变(已解决)
小白学习 router.js:两个组件之间跳转 但是路由变了,页面没有改变的原因是因为app.vue里面没有router-view(很关键)
- Vue.js路由跳转带参数到模板组件。
从SalesOrderQuery组件跳到SalesOrder组件,并且通过params属性携带数据. handleClick(row) { //alert(row.FSaleName);//获取该行F ...
- vue 项目路由跳转后显示不同的title
1.在router/index.js的每个路由中配置title 2.在项目中运行命令 npm install vue-wechat-title --save 安装插件(在 package.json文件 ...
- vue axios路由跳转取消所有请求 和 防止重复请求
直接上干货 在发送第二次请求的时候如果第一次请求还未返回,则取消第一次请求,以保证后发送的请求返回的数据不会被先发送的请求覆盖. 或者是跳转路由的时候取消还未返回的请求 第一步: axios 怎么取消 ...
随机推荐
- idea在debug模式启动非常慢,日志正常debug模式一直在启动中状态
背景 最近在使用idea开发工具时遇到了一个奇怪的现象,使用run tomcat项目可以正常启动,但是使用debug模式启动时,控制台可以正常打印日志,但是进度十分缓慢,也没有任何报出任何错误信息.只 ...
- VMware安装CentOS7教程
首先安装VM,VM破解版和激活版的百度有很多,随意下载一个 下载CentOS7 地址1:https://mirrors.btte.net/centos/7/isos/x86_64/ 地址2:http: ...
- Python面向对象中super用法与MRO机制
1. 引言 最近在研究django rest_framework的源码,老是遇到super,搞得一团蒙,多番查看各路大神博客,总算明白了一点,今天做一点总结. 2. 为什么要用super 1)让代码维 ...
- shell cut
使用说明cut 命令从文件的每一行剪切字节.字符和字段并将这些字节.字符和字段写至标准输出.如果不指定 File 参数,cut 命令将读取标准输入.必须指定 -b.-c 或 -f 标志之一. 主要参数 ...
- java面试 关键字
1. final关键字有哪些用法? 修饰类.方法和变量. (1) final变量是只读的,不允许改变其引用,与static共用可声明常量.JVM会对final变量进行优化,比如常量折叠. (2) fi ...
- [ 原创 ] Java基础8--什么叫做重载
重载是在同一个类中,有多个方法名相同,参数列表不同(参数个数不同,参数类型不同),与方法的返回值无关,与权限修饰符无关,B中的参数列表和题目的方法完全一样了.
- 数据储存为base64编码,如何实现模糊搜索
假设字段title存储的是经过base64编码后的字符串,$key是存搜索关键字的变量 则普通的查询方法, select * from 表名 where title like '$key'; 无法正确 ...
- 递归与分治策略之棋盘覆盖Java实现
递归与分治策略之棋盘覆盖 一.问题描述 二.过程详解 1.棋盘如下图,其中有一特殊方格:16*16 . 2.第一个分割结果:8*8 3.第二次分割结果:4*4 4.第三次分割结果:2*2 5.第四次分 ...
- LOJ P1155 双栈排序 二分图染色 图论
https://www.luogu.org/problem/show?pid=P1155 题解: https://www.byvoid.com/zhs/blog/noip2008-twostack 开 ...
- POJ 3177 Redundant Paths 双联通分量 割边
http://poj.org/problem?id=3177 这个妹妹我大概也曾见过的~~~我似乎还没写过双联通分量的blog,真是智障. 最少需要添多少条边才能使这个图没有割边. 边双缩点后图变成一 ...