Vue Router 常见问题(push报错、push重复路由刷新)
Vue Router 常见问题
用于记录工作遇到的Vue Router bug及常用方案
router.push报错,Avoided redundant navigation to current location: “/xxx”
大意为 路由频繁点击导致路由重复,该报错对路由跳转功能没有任何影响
解决方案:重写push方法
将异常捕获就不会报错了
let routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return routerPush.call(this, location).catch(err => err)
}
重复点击路由 刷新页面效果
在重写VueRouter.prototype.push方法时,利用VueRouter的currentRoute对象中的fullpath属性与push函数的参数对比,判断是否为同一路由。如果是,使用一下方法完成页面刷新
方法一:window.location.reload()
问题在于会刷新整个页面,不是很推荐
let routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
let history = this.currentRoute && this.currentRoute.fullPath;
if (location === history) {
window.location.reload(); //整个页面都刷新
}
return routerPush.call(this, location).catch(err => err)
}
方法二:v-if 控制router-view实现局部刷新
较为复杂,但是能够实现局部刷新
由于VueRouter.prototype.push中的this指向VueRouter实例
该实例中存在 "全局Vue实例"(main.js new Vue()生成的) 的引用属性 "app"(this.app)
于是,push函数里面就可以操作Vue实例了。
实现思维:
vue实例使用provide注入一个 getRouterAlive 方法,返回当前vue实例中定义的状态变量 isRouterAlive
再定义一个 reloadChild 方法,修改状态变量 isRouterAlive的值为false,dom更新后再改为true
需要局部刷新的地方 inject 接受 getRouterAlive 这个方法,再在router-view 上绑定
v-if="Object.prototype.toString.call(getRouterAlive) == '[object Function]' && getRouterAlive()"
实现代码:
main.js
// main.js
new Vue({
router,
store,
render: h => h(App),
provide() {
return {
getRouterAlive: this.getRouterAlive,
}
},
data: {
isRouterAlive: true
},
methods: {
getRouterAlive() {
return this.isRouterAlive;
},
reloadChild() {
this.isRouterAlive = false;
this.$nextTick(() => {
this.isRouterAlive = true;
})
}
}
}).$mount('#app')
router.js
// router/index.js
let routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
let history = this.currentRoute && this.currentRoute.fullPath;
if (location === history) {
this.app.reloadChild && this.app.reloadChild();
}
return routerPush.call(this, location).catch(err => err)
}
局部刷新
// 局部刷新
...
<router-view v-if="Object.prototype.toString.call(getRouterAlive) == '[object Function]' && getRouterAlive()"></router-view>
...
inject: ["getRouterAlive"],
...
Vue Router 常见问题(push报错、push重复路由刷新)的更多相关文章
- 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题
2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...
- git push报错error: failed to push some refs to 'git@github.com'
git push报错error: failed to push some refs to 'git@github.com' $ git push -u origin master To git@git ...
- git push报错大文件,删除后重新commit依然报错
git push报错: github不能上传大文件,按道理删掉重新提交就行了 可是删掉后,git add -A,再git commit,再git push,依然报错 后来我想明白了 github上传时 ...
- 解决上传代码到GitHub报错Push rejected: Push to origin/master was rejected
最近在 push 代码到 github 时,IDEA报错 Push rejected: Push to origin/master was rejected 在网友找了一圈,发现都不是想要的答案 于是 ...
- vue init webpack nameXXX 报错问题:
vue新建demo项目报错如下: M:\lhhVueTest>vue init webpack L21_VueProject vue-cli · Failed to download repo ...
- vue 表单校验报错 "Error: please transfer a valid prop path to form item!"
vue 表单校验报错 "Error: please transfer a valid prop path to form item!" 原因:prop的内容和rules中定义的名称 ...
- vue中使用JSX报错,如何解决
Support for the experimental syntax 'jsx' isn't currently enabled (32:12): 30 | }, 31 | render() { & ...
- vue Blob 下载附件报错
vue Blob 下载附件报错,不妨试试: window.location.href=后台地址
- git push 报错 "Peer certificate cannot be authenticated with known CA certificates"
使用git push -u origin master 命令向远程仓库提交代码时报错:Peer certificate cannot be authenticated with known CA ce ...
随机推荐
- cs_play
# -*-coding:utf-8-*-__author__ = "logan.xu"###构造函数#class Role:# n = 123# # 类变量 比如 n = 123# ...
- docker-harbor私有仓库使用笔记
1. 登录harbor管理页面,创建项目,比如yuqx_test 2. admin登录,此处免密登录,正常情况下会输入账号密码 [root@k8s-rancher2 ~]# docker login ...
- golang redis
安装 下载第三方包: go get -u github.com/go-redis/redis/v9 连接 // 定义一个rdis客户端 var redisdb *redis.Client // 初始化 ...
- 【SpringMVC】完全注解配置SpringMVC
创建初始化类,代替web.xml 在Servlet3.0环境中,容器会在类路径中查找实现javax.servlet.ServletContainerInitializer接口的类,如果找到的话就用它来 ...
- python 加速运算
原文链接:https://blog.csdn.net/qq_27009517/article/details/103805099 一.加速查找 1.用set而非list import time dat ...
- 前端路由原理之 hash 模式和 history 模式
什么是路由? 个人理解路由就是浏览器 URL 和页面内容的一种映射关系. 比如你看到我这篇博客,博客的链接是一个 URL,而 URL 对应的就是我这篇博客的网页内容,这二者之间的映射关系就是路由. 其 ...
- Activiti 学习(一)—— Activiti 基础
工作流概述 在一个公司中,每一项业务的开始和结束,都可以理解为一个工作流,例如,公司的费用报销的基本流程如下: 如图所示的工作流:员工先提出费用报销申请,提交该申请给部门领导,部门领导审批后,再提交给 ...
- VUE006. 前端跨域代理服务器ProxyTable概述与配置
概述 使用 vue-cli 工具生成一个 vue 项目: vue init webpack my-project-vue 在生成的项目结构里,会有一个 index.js 文件.在这个文件里 ...
- python3.x内置函数
函数 返回值类型 函数详情 abs(x) int|float 求绝对值,若是复数则返回复数的模 all(iterable) bool 若所有元素为真则返回True(非0,非空,非None) any(i ...
- netty系列之:在netty中处理CORS
目录 简介 服务端的CORS配置 CorsConfigBuilder CorsHandler netty对cors的支持 总结 简介 CORS的全称是跨域资源共享,他是一个基于HTTP-header检 ...