vue中遇到的坑keep-alive、vue-router相关
在进入详情页之后,然后返回到首页,报错如下。
虽说是报错了,但是对我最后的页面并没有什么影响,但是出现了一堆红色的报错,作为一个前端工程师,看着还是十分难受的!!
一旦出现问题,我的解决思路一般是,查看错误,这里的错误几乎是无法查看的,提示非常不明确,所以第二部工作就是在指定的DetailPage页面逐个删除可能会出错的地方,然后再测试,这样的好处是可以逐步缩小出错的范围,结果发现,这些都没有用!没有用! 于是,我还能想到的就是路由以及从首页router-link的代码,这里是router-link通过query传递参数到DetailPage来接收, 在router-link中的配置如下:
{
path:"/DetailPage",
component: DetailPage,
name: "详情页",
meta: {keepAlive: true}
},
在检查了path和component没有注册出错之后,我接着就去掉了 keepAlive: true 选项,即不再缓存,这时候,确实就成功了! 即不再报错。
如果我不把meta去除,而是将keepAlive的值修改为false,那么可以发现也不会报错! 也不会报错啊!
于是我大胆的推测: 对于通过参数传递到的页面,它是不可缓存的! 必须要是用 keepAlive: false 的形式。
为了验证这个想法,我又找到了另外一个页面编辑地址页,同样也可以通过 this.$route.query 接收参数的 , 是从地址管理页传递过来的,router-link如下:
<router-link :to="{path: '/commodity/payment/editAddress', query: {
id: item.id,
name: item.name,
contact: item.contact,
address: item.address
}}">
<span class="edit">编辑</span>
</router-link>
可以推测: 如果我把 editAddress 的keepAlive值设置为true,那么也会出现类似报错问题,于是设置之后,我尝试发现:并没有报错!并没有报错啊!
所以这个推测是有问题的! 那么还有什么可能导致DetailPage.vue页面的 keep-alive 出错呢? 希望后面可以解决这个问题!
至少这里可以解决报错问题还是不错的!
如果触发了使用 keep-alive, 那么就缺少了 created 的过程,我们可以通过 activated 钩子函数来替代生命周期的钩子函数。
并且使用keep-alive的好处是,不仅对于主要的组件会触发 activated 钩子函数, 而对于其中包含的组件也会触发钩子函数, 这一点是非常棒的。
vue中遇到的坑keep-alive、vue-router相关的更多相关文章
- vue中遇到的坑 --- 变化检测问题(数组相关)
最近在项目中遇到了一个问题,不知道为什么,所以最后通过动手做demo实践.查文档的方式解决了,这里做一个总结. 例1 <!DOCTYPE html> <html lang=" ...
- vue中遇到的坑!!!!!
一 .vue安装的坑 报错时的常见问题 1.cnpm install 模块名 –save-dev(关于环境的,表现为npm run dev 启动不了)cnpm install 模块名 –save(关于 ...
- vue中的css作用域、vue中的scoped坑点
一.css作用域 之前一直很困扰css的作用域问题,即使是模块化编程下,在对应的模块的js中import css进来,这个css仍然是全局的.导致在css中需要加上对应模块的html的id/class ...
- vue中遇到的坑
如何解决在vue中替换图片.一个使用base64,而我们使用zepto之后,src找不到资源,因为已经打包了,难道强行写base64. 1. 引入文件时语法很重要! import "Foot ...
- 025——VUE中事件的基本使用与VUE中差异
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Django day 33 vue中使用element-ui的使用,课程的相关介绍,vue绑定图片,课程列表接口,课程详情页面
一:vue中使用element-ui的使用, 二:课程的相关介绍, 三:vue绑定图片, 四:课程列表接口, 五:课程详情页面
- vue中的js引入图片,使用require相关问题
vue中的js引入图片,必须require进来 或者引用网络地址 <template> <div class="home"> <img alt=&qu ...
- [ vue ] quasar框架踩坑:在vue文件外导入路由,执行router.push('/')没有效果
问题描述: 1. 如图所示的项目结构目录, axios.js 文件负责拦截全局请求和回复,我在拦截回复的代码中写了:如果服务器回复了一个401错误,则执行Router.push('/'),但是该方法失 ...
- 049——VUE中使用animation与transform实现vue的动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Creating Custom UITableViewCells with NIB files
Maksim Pecherskiy 13 November 2012 Well this sucks. Apparently these days you can only use the Inter ...
- 编写高质量代码改善C#程序的157个建议——建议130:以复数命名枚举类型,以单数命名枚举元素
建议130:以复数命名枚举类型,以单数命名枚举元素 枚举类型应该具有负数形式,它表达的是将一组相关元素组合起来的语义.比如: enum Week { Monday, Tuesday, Wednesda ...
- WCF 学习笔记
Windows Communication Foundation (WCF) 是用于构建面向服务的应用程序的框架.借助 WCF,可以将数据作为异步消息从一个服务终结点发送至另一个服务终结点.服务终结点 ...
- Tomcat之Web站点部署
上线代码有两种方式,第一种方式是直接将程序目录放在webapps目录下面,这种方式大家已经明白了,就不多说了.第二种方式是使用开发工具将程序打包成war包,然后上传到webapps目录下面.下面让我们 ...
- Inno Setup 通用脚本及简要说明( 一般情况够用了)
;以下脚本主要完成创建开始菜单和桌面的快捷方式,目录安装. #define MyAppName "我的软件名" #define MyAppVersion "1.0&quo ...
- 基于Struts2开发快递收发系统 毕业设计 源码
基于Struts2开发快递收发系统 开发环境: Windows操作系统 开发工具:Eclipse/MyEclipse+Jdk+Tomcat6+MySql数据库 运行效果图: 此源码经过详细测试 保证 ...
- Thrift框架学习
参考文章:1.http://www.kankanews.com/ICkengine/archives/54084.shtml 2.http://www.cnblogs.com/liping135991 ...
- JulyNovel-React
写在前面的话 目前,JulyNovel后端框架基本搭建.部署完毕,GraphQL提供的API接口也有着高可用性,数据库里也存了六七百兆爬来的小说数据,是时候开始写前端了. 框架选用 JulyNovel ...
- ASP.NETMVC4 分页组合查询解决方法
本人新手刚在webform转到mvc 像linq ef啥的,都是不会的不行不行的,不会就问群友,找资料 今天本屌遇到了一个分页组合查询的问题,解决了2个小时,把代码共享给大家 话不多话,直接上代 ...
- coderfoces D. Gourmet choice
D. Gourmet choice time limit per test 2 seconds memory limit per test 256 megabytes 题目链接: https: ...