Vue. 之 刷新当前页面,重载页面数据

Vue. 之 刷新当前页面,重载页面数据

如下截图,点击左侧不同的数据,右侧根据左侧的KEY动态加载数据。由于右侧是同一个页面,在进行路由跳转后,不会再次刷新数据。

  解决方案:

    右侧的页面中 script代码块添加:watch模块,如下代码:

          ... ...

     mounted : function() {
            this.loadData();
        },
        watch: {
            //监听相同路由下参数变化的时候,从而实现异步刷新
            ‘$route‘(to,from) {
                this.loadData();
            },
        },
        methods: {
            loadData() {
                let varCode = this.$route.query.varCode;
                this.api.service
                .gets({
                    varCode: varCode
                })
                .then(res => {
                    console.log(res)
                })
            },

    ... ...

原文地址:https://www.cnblogs.com/Charles-Yuan/p/11302475.html

时间: 2024-07-29 18:06:56

Vue. 之 刷新当前页面,重载页面数据的相关文章

vue中使用provide和inject刷新当前路由(页面)

1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject 组合 作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效. App.vue TagViewBar.vue

vue选择性刷新组件&如何实现优雅的刷新页面

在开发项目的过程中,有时修改后台的数据变化可能不会及时更新到页面上,此时就需要我们刷新页面更新数据,但是直接调用刷新window.location.reload()可能对操作的体验不是很好,所以就需要下面的方法. 列举个场景,比如修改主体content内容,我想要刷新主体部分的组件,但是不刷新title和aside组件,怎么实现呢? 实现方法就是在想要刷新的组件中封装一个方法,当需要刷新页面时直接调用这个方法就可以无痕迹刷新这个组件(页面)! 代码: 1.在app.vue中封装方法,此时调用可以

vue项目刷新当前页面

场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体验不是很好 用vue-router重新路由到当前页面,页面是不进行刷新的. location.reload().这种也是一样,画面一闪,体验不是很好 推荐解决方法: 用provide / inject 组合原理:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的

Vue小案例 之 商品管理------创建页面与部分数据

logo的路径: 页面的初始布局: 初始的HTML: <div id="container"> <!--logo title--> <div class="header"> <img :src="imgUrl+imgName" class="logo" height="200px" width="150px" style="paddin

关于vue数组中对象属性变更页面没重新渲染的问题

前段时间做开发的时候用mqtt监听了服务端信息,推送过来的数据要变更数组里面的对象的数据,修改好后但是页面并没有更新,因为javascript机制,vue并不能检测到数组变化,也是查阅知道了$set()函数, 具体用法: arr.$set(index, { name : value }), index: 索引,name: 数组中对象的属性名, value: 要赋给属性的值 this.footerList.$set(i, { siteId : monitorSiteData[j].siteId,

判断当前页面离开后处理数据

做一个项目,涉及到记录下当前页面的鼠标坐标,并发送给后台. 有两个步骤,一步是记录下鼠标坐标并发送后台,二步是当鼠标离开页面时停止发送数据. 记录下鼠标坐标并发送的代码,如下: // 用sta字符串记录下鼠标的坐标 var sta = ''; function changeXY(){ $(window).bind('mousemove',function(e){ var x = e.pageX; var y = e.pageY; sta += '(' + x +':' + y + '),'; }

基于laravel5.4 vue 和vue-element搭建的单页面后台CMS

介绍 该项目后台是基于vue和laravel搭建的单页面CMS系统,包含了文章管理,权限管理,用户管理等基本模块. 前台使用了传统web技术,laravel渲染搭建了个博客系统 github地址:https://github.com/zdpdp/lvCMS 喜欢的点个星星喔 搭建 npm install composer install npm run dev / npm run prod 修改根目录下的env文件 填写自己的数据库信息 php artisan migrate (也可使用目录下的

Vue仿微信公众号配置页面

一.需求: 1.刚好公司需要自定义微信公众号菜单配置,在vue的后台管理系统写一个页面,进行菜单配置. 二.页面图片:(menu对象值那个地方只是打印出来看而已,自行去掉) 三.demo链接 https://summer-lin.github.io/vue-wechat-menu-demo/#/ 四.框架 vue + elementUI + mockjs 因为公司是基于vue和elementUI,如果想改其他UI框架,则将el-开头的组件都换了就行了. 五.注意事项: 1.data里面有个men

解决vue多个路由共用一个页面的问题

在日常的vue开发中我们可能会遇见多个路由需要共用一个页面的需求,特别是当路由是通过动态添加的,不同的路由展示的东西只是数据不同其他没有变化.例如: ? 1 2 3 4 5 6 7 8 9 10 11 let routes = [   {path:"/zhanshan",   components:Person,   },   {path:"/lisi",   components:Person,   },   {path:"/wangwu",