转自:https://juejin.im/post/593121aa0ce4630057f70d35  

问题的根源: 用户点击当前高亮的路由并不会刷新view,因为vue-router会拦截你的路由,它判断你的url并没有任何变化,所以它不会触发任何钩子或者是view的变化(这是vue设计的一个原则:一切都是从路由出发的)

  现实: 点击当前路由,改变视图是很多开发人员的“硬需求”

  解决方案:

    

clickLink(path) {
this.$router.push({
path,
query: {
t: +new Date() //保证每次点击路由的query项都是不一样的,确保会重新刷新view
}
})
}

  弊端:url 后面有一个很难看的 query 后缀如 xxx.com/article/list?t=1496832345025

Vue--关于点击当前路由,视图无法更新的解决方案的更多相关文章

  1. vue修改elementUI的分页组件视图没更新问题

    转: vue修改elementUI的分页组件视图没更新问题 今天遇到一个小问题平时没留意,el-pagination这个分页组件有一个属性是current-page当前页.今天想在methods里面手 ...

  2. vue中修改了数据但视图无法更新的情况[转载]

    我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况: 1.v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到 数组数据 ...

  3. vue中修改了数据但视图无法更新的情况

    数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以 Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() ...

  4. vue数组中数据变化但是视图没有更新解决方案

    原文链接:http://www.cnblogs.com/sufubo/p/6906261.html#undefined 问题:在vue项目中,我更改数组中的某一条数据,直接arr[i]=newVal ...

  5. vue中修改了数据但视图无法更新的情况(转)

    原文地址:https://blog.csdn.net/qq_39985511/article/details/79778806

  6. vue项目创建步骤 和 路由router知识点

    菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...

  7. vue 路由更新页面视图未更新问题

    最近项目做面包屑的时候遇到一个问题就是路由变化的时候页面视图并没有发生变化,后来上网查,发现是vue-router的特性导致的. vue-router的切换不同于传统的页面的切换.路由之间的切换,其实 ...

  8. vue 路由视图,router-view嵌套跳转

    实现功能:制作一个登录页面,跳转到首页,首页包含菜单栏.顶部导航栏.主体,标准的后台网页格式.菜单栏点击不同菜单控制主体展示不同的组件(不同的页面). 配置router-view嵌套跳转需要准备两个主 ...

  9. Vue-初步了解vue-router的三要素:路由map 、路由视图、路由导航

    安装vue-router模块 使用vue-router前要先安装vue-router库 cnpm install vue-router –save 使用vue-router vue-router有三个 ...

随机推荐

  1. MySQL按中文拼音排序

    好多时候,我们希望查询出来的记录能够按照汉语拼音即英文的26个字母排序,但是utf字符集是外国人弄的,不是按照汉语拼音的顺序排列的,因此,我们需要将要排序的字段把编码设定为GBK或者BG2312再进行 ...

  2. HTML 和 JavaScript 编写简单的 404 界面

    编写简单的 404 界面,也可以用来做 500 报错界面,还会飘东西,特别好,蛮漂亮的! <!DOCTYPE html> <html> <head> <met ...

  3. 07: python基础 零碎知识点

    目录: 1.1 python异常处理 1.2 三元运算,filter和map与lambda表达式结合使用举例 1.3 内置方法 1.4 动态导入模块 1.1 python异常处理返回顶部 1.Pyth ...

  4. C语言结构体,点运算和箭头运算

    C语言有一种数据类型叫结构体,其定义格式为: struct 结构体名 { 结构体成员变量定义; }; 如: struct student { char name[20]; int age ; doub ...

  5. 25个c#知识点

    网站地址:http://m.3y.uu456.com/mbp_56hl91r1rx5uqa87qrzo_1.html

  6. Go第一篇之轻松入门

    Go语言简介 Go语言简史 Go 语言(或 Golang)是 Google 在 2007 年开发的一种开源编程语言,于 2009 年 11 月 10 日向全球公布.Go 是非常年轻的一门语言,它的主要 ...

  7. ajax实现highchart与数据库数据结合完整案例分析(三)---柱状折线图

    作者原创,未经博主允许,不可转载 在前面分析和讲解了用java代码分别实现饼状图和折线图,在工作当中,也会遇到很多用ajax进行异步请求 实现highchart. 先展示一下实现的效果图: 用ajax ...

  8. Ubuntu14.04 terminal添加右键

    设置Ubuntu 14.04右键终端的方法如下: 首先要安装一个包,即可在右键里面添加一个“打开终端”的菜单. sudo apt-get install nautilus-open-terminal ...

  9. MKAnnotationView和MKPinAnnotationView的区别

    如果想创建以静态图片作为大头针图片的话,可以通过创建MKAnnotationView是实例.如果想使用apple自带的大头针则创建MKPinAnnotationView

  10. 一个很棒的Flutter学习资源列表

    目录 文章 一开始 HOWTO文档 网站/博客 高级 视频 组件 演示 UI 材料设计 图片 地图 图表 导航 验证 文字和富文本 分析.流量统计 自动构建 风格样式 媒体 音频 视频 语音 存储 获 ...