vue刷新当前路由:router-view 复用组件时不刷新的3种解决方案总结
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。
对于路由,不同的路由跳转,vue会帮我们刷新路由,但是我今天要说的是,同一路由刷新我们的解决方法。
问题背景:
点击用户头像 => 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。
<script>export default {data() {return { data: {} } }, methods: { fetchDate() { // 使用 axios获取数据 ...... }, created() { this.fetchDate(); } } </script>
解决办法:
使用 watch,观察路由,一旦发生变化便重新获取数据!
<script>export default {data() {return { data: {} } }, methods: { fetchDate() { // 使用 axios获取数据 ...... }, created() { // 组件创建完后获取数据, // 此时 data 已经被 observed 了 this.fetchDate(); }, watch: { // 如果路由有变化,会再次执行该方法 "$route": "fetchDate" } } </script>
拓展学习
在使用Vue-router做项目时,会遇到如/serviceId/:id
这样只改变id
号的场景。由于router-view是复用的,单纯的改变id
号并不会刷新router-view,而这并不是我们所期望的结果
当然,我们可以在点击事件上加上router.go(0),强制刷新整个页面来满足效果。但页面整体的刷新会使体验下降,并且作为个人也不是很能接受这样的方法。在查阅了一些资料后,发现可以有以下两种方法可以解决问题。
1、使用watch方法
watch方法据说是官方推荐的方法(抱歉,我没好好看文档)。当id发生变化时,'$route'也会相应地发生变化,因此可以通过watch的方法来进行操作。
watch: {'$route': function (to, from) {// 我这里还是用了Vuex,不过应该不影响理解this.$store.dispatch('updateActiveTemplateId', this.$route.params.templateId)// 通过更新Vuex中的store的数据,让数据发生变化this.getTemplateById()} },
2、通过改变router-view中的key来达到刷新组件的目的,我现在用的就是这种方法(因为我使用的按需加载,所以加载组件也不会加载所有界面)
<router-view :key="activeDate"></router-view> //我用了一个简单粗暴的方式来改变key,时间戳(捂脸) //this.activeDate = new Date()
3、还有一种官方文档的方法
后来看博客有了新方案——beforeRouteLeave
在组件内直接使用,前提是你用了vue-router
:
beforeRouteLeave (to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this` }
vue刷新当前路由:router-view 复用组件时不刷新的3种解决方案总结相关推荐
- Vue学习之路由(Router)
Vue学习之 路由(Router) 文章目录 Vue学习之 路由(Router) 一.路由是什么? 二.Vue Router的安装 1.直接下载/CDN 2.NPM安装 三.路由的基础使用 1.定义路 ...
- [vue] vue如果想扩展某个现有的组件时,怎么做呢?
[vue] vue如果想扩展某个现有的组件时,怎么做呢? 不对原组件进行更改的:使用Vue.extend直接扩展使用Vue.mixin全局混入HOC封装 个人简介 我是歌谣,欢迎和大家一起交流前后端知 ...
- Html中解决点击 a 标签刷新的问题,实现点击时不刷新
Html中解决点击 a 标签刷新的问题,实现点击时不刷新 参考文章: (1)Html中解决点击 a 标签刷新的问题,实现点击时不刷新 (2)https://www.cnblogs.com/iStu/p ...
- vue工程化与路由router
一.介绍 vue.js 是 目前 最火的前端框架,vue.js 兼具 angular.js 和 react.js 的优点,并剔除它们的缺点.并且提供了很多的周边配套工具 如vue-router .vu ...
- html a标签刷新,Html中解决点击 a 标签刷新的问题,实现点击时不刷新
css(二) 本文是一些作者在长期写代码中总结的常用css查询,写在本博客中,方便以后查询. 1. 颜色属性: color HEX(十六进制色:color: #FFFF00 --> 缩写:# ...
- vue项目创建步骤 和 路由router知识点
菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) vue导航守卫(全局守卫.单个路由独享.组件级守卫) 1 ...
- vue路由参数改变,组件数据没重新更新问题
最近一段时间在用vue做项目,遇到一个很纠结的问题,本来是两个页面样式结构相似,就是数据不同,所以在router里面配置了一个id参数,发现vue路由参数改变,组件数据没重新更新,查了一下官方文档,发 ...
- Vue学习:Vue中的路由详解(完整版)
一.vue-router的理解 首先,需要理解一下vue-router: vue-router是vue的一个插件,专门用来实现SPA应用.SPA也就是单页Web应用,特点是:整个应 用只有一个完整的页 ...
- Vue--Router--解决多路由复用同一组件页面不刷新问题
原文网址:Vue--Router--解决多路由复用同一组件页面不刷新问题_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍如何解决Vue的多路由复用同一组件页面不刷新问题. 多路由复用同一组件的 ...
最新文章
- SVO学习笔记(一)
- 大学生能从计算机游戏中受益,2017年6月英语四级作文练习:大学生玩游戏
- MySQL连表分组统计使用count查询出数据不准确问题解决方案
- 关于日志系统显示SLF4J: Failed to load class “org.slf4j.impl.StaticLoggerBinder“.
- 作者:房毓菲(1990-),女,就职于国家信息中心信息化研究部,中国智慧城市发展研究中心政策研究组副组长。...
- Android Studio下gradle环境搭建
- 搜索引擎广告计费系统如何防恶意点击
- JSON Schema
- Excel:VBA编程入门(一)
- ArcGis 拓扑检查——狭长角锐角代码C#
- 超简洁好看的个人网站导航页源码
- android 吉他模拟器,真实吉他模拟器
- 电瓶车换电柜的静电浪涌设计考虑
- outlook 2016 添加126邮箱教程
- python玩扫雷_python实现扫雷小游戏
- 物联网小试一下——使用阿里云控制Arduino套件灯的开关
- 高通平台开发系列讲解(系统篇)coredump
- 百度人脸识别sdk图片转码的问题
- Android3d结构光,3D结构光首功+Find+X成首款刷脸支付安卓机
- Java-getter和setter