vue刷新路由,不刷新页面
1.路由介绍
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。
2.刷新路由
对于路由,不同的路由跳转,vue会帮我们刷新路由,但是我今天要说的是,同一路由刷新我们的解决方法。
1.在使用Vue-router做项目时,会遇到如/serviceId/:id
这样只改变id
号的场景。由于router-view是复用的,单纯的改变id
号并不会刷新router-view,而这并不是我们所期望的结果。
2.我们可以在点击事件上加上router.go(0)
,强制刷新整个页面。当然这种体验效果太差,我认为不可取。
3.使用watch的方法,具体的可以看一下官方文档
4.通过改变router-view中的key来达到刷新组件的目的,我现在用的就是这种方法(因为我使用的按需加载,所以加载组件也不会加载所有界面)
<router-view :key="activeDate"></router-view>
我用了一个简单粗暴的方式来改变key,时间戳(捂脸)
this.activeDate = new Date()
vue刷新路由,不刷新页面的更多相关文章
- vue的路由以后的页面整合
前面呢也提到一点点,今天就吧这个页面整合给分享一下.有不对的地方还望包容. 在vue中,一般在主显示的界面的路径呢一般是'/'也就是单括号中有一斜杠的这个呢是默认的显示路径.只要路由配置了这个路径用& ...
- Vue 前端路由 vue-router
1.前端路由 后端路由:多页面,服务器端渲染好返回给浏览器. 前端路由:改变url不向服务器发送请求:前端可以监听url变化:前端可以解析url并执行相应操作. 前后端分离:后端只提供API来返回数据 ...
- VUE 项目刷新路由指向index.html
背景描述: VUE 项目经过 npm run bulid 生成静态文件上传到服务器后,当我们切换路由并刷新页面,nginx 服务器会报 502 或者 404 错误. 原因分析: 我猜测是因为在 VUE ...
- vue-router+webpack线上部署时单页项目路由,刷新页面出现404问题
使用vue项目,线上部署的时候,访问首页以及通过路由打开二级页面没有问题,但是一刷新就出现404现象 因为刷新页面时访问的资源在服务端找不到,因为vue-router设置的路由不是真实存在的路径. 解 ...
- vue react 路由history模式刷新404问题解决方案
vue单页因微信分享和自动登录需要,对于URL中存在’#’的地址,处理起来比较坑.用history模式就不会存在这样的问题.但是换成history模式,就会有个新的问题,就是页面刷新后,页面就无法显示 ...
- Vue 页面 前进刷新 后退不刷新(keepAlive)
前言 遇到这一个个问题 需要是这样的 Vue里面的不刷新问题 页面分为: A 主页 B列表页 C 详情页 A beforeRouteLeave 时设置 to.meta.keepAlive = ...
- VUE的一个数据绑定与页面刷新相关的bug
1.场景: N层嵌套的循环查询业务场景,框架是vue.其中在最后一层查完之后,还需要查其中每一项的两个属性,类型都是列表.查完之后将其赋值给一个变量用于页面展示.代码如下: (1)异常代码: getS ...
- Vue使用定时器定时刷新页面
1. 需求说明 在前端开发中,往往会遇到页面需要实时刷新数据的情况,给用户最新的数据展示. 2. 逻辑分析 如果需要数据实时更新,我们自然是需要使用定时器,不断的调用接口数据,会相对的消耗内存. 3. ...
- vue单页应用前进刷新后退不刷新方案探讨
引言 前端webapp应用为了追求类似于native模式的细致体验,总是在不断的在向native的体验靠拢:比如本文即将要说到的功能,native由于是多页应用,新页面可以启用一个的新的webview ...
随机推荐
- BeyondCompare使用一段时间后会因“许可证密钥已被撤销:3281-0350“而无法使用
解决方式: 1.用任意文本编辑软件打开“C:\Users\[Your User Name]\AppData\Roaming\Scooter Software\Beyond Compare 3\BCSt ...
- C# 获取 串口 设备名称 与 串口号 ManagementObjectSearcher类
1.效果图: 2.代码 class Program { static void Main(string[] args) { GetComList(); } private static void Ge ...
- 深入浅出Java探针技术2---java字节码生成框架ASM、Javassist和byte buddy的使用
目前Java字节码生成框架大致有ASM.Javassist和byte buddy三种 ASM框架介绍及使用 1.ASM介绍 ASM是一种Java字节码操控框架,能够以二进制形式修改已有的类或是生成类, ...
- css3 样式过度器 Transition
transition 简写属性,用于在一个属性中设置四个过渡属性. 1. transition 把鼠标指针放到 div 元素上,其宽度会从 100px 逐渐变为 300px: eg: div{wi ...
- Swagger结合mustache模板生成后台接口代码、以及前后台建模代码
之前项目中使用的的thrift来建模,维护前后台模型以及rest接口,前台使用的是angular2: 但是使用thrift只能生成建模,后台的rest接口的Controller文件还是需要手动去写,一 ...
- AES256对称加密
需要引入bouncycastle库的jar包 package test; import java.io.UnsupportedEncodingException; import java.securi ...
- ElasticSearch(十)Elasticsearch检索出的数据列表按字段匹配的优先顺序及搜索单词拼音一部分搜不到数据
检索出的数据列表按字段匹配的优先顺序 一.举例 比如,发布一篇文章,文章包括基本的字段包括标题.发布时间.点击率.关键字.内容.当在页面中输入“教育”搜索关键词,会检索出指定字段包括“教育”的所有数据 ...
- opencv学习之路(40)、人脸识别算法——EigenFace、FisherFace、LBPH
一.人脸识别算法之特征脸方法(Eigenface) 1.原理介绍及数据收集 特征脸方法主要是基于PCA降维实现. 详细介绍和主要思想可以参考 http://blog.csdn.net/u0100066 ...
- 求最近点对算法分析 closest pair algorithm
这个帖子讲得非常详细严谨,转一波. http://blog.csdn.net/lishuhuakai/article/details/9133961
- 20175307《Java程序设计》第5周学习总结
教材内容总结 6.1 接口 1接口声明 接口使用关键字interface来进行声明 eg:interface 接口的名字 2接口体 接口体中包含常量的声明和抽象方法两部分(没有变量) 注意一定的要 ...