vue中使用provide和inject刷新当前路由（页面）

1.场景

在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。

2.遇到的问题

1. 用vue-router重新路由到当前页面，页面是不进行刷新的

2.采用window.reload()，或者router.go(0)刷新时，整个浏览器进行了重新加载，闪烁，体验不好

3.解决方法

provide / inject 组合

作用：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

App.vue

TagViewBar.vue

原文地址：https://www.cnblogs.com/cwxwdm/p/10783064.html

时间： 2024-10-09 03:35:41

vue中使用provide和inject刷新当前路由（页面）的相关文章

vue中类名和组件经过刷新不对应的解决办法

页面路由如下: index.js路由文件如下: HTML页面设置active如下: 解决了刷新页面active和组件不对应的问题. 原文地址:https://www.cnblogs.com/yegeng/p/10276223.html

VUE 中使用 iview Form组件 enter键防止页面刷新

<Form :label-width="100" inline label-position='left' @keydown.native.enter.prevent ="()=>{}"> 或者使用官方的 @submit.native.prevent 原文地址:https://www.cnblogs.com/smzd/p/9197915.html

vue中通过WeixinJSBridge关闭微信公众号当前页面，返回微信公众号首页

之前有个需求,点击菜单进入到微信公众号模块,然后点击返回的时候不知道到哪里去,后来觉得点返回的时候直接关闭页面,但是window.close()并不能关闭页面,然后经过查找资料,发现通过以下方法可以 setTimeout(function() { //这个可以关闭安卓系统的手机 document.addEventListener( "WeixinJSBridgeReady", function() { WeixinJSBridge.call("closeWindow"

如何在Vue中建立全局引用或者全局命令

1 一般在vue中,有很多vue组件,这些组件每个都是一个文件.都可能需要引用到到相同模块.我们不想每个文件都import 一次模块. 如果是vue编写的插件我们可以用 Vue.use(...) 2 但是如果想添加一个全局命令,同时又让每个vue的文件都能用到怎么办? 第一步:最好建立一个全局的命令文件例如:directive/directive.js 第二步:利用Vue.directive()建立一个全局命令,并将它暴露出来,例如一个focus 让表单自动聚焦第三部步:在main.js(入口

vue中修改子组件样式

一.全局修改 1.在App.vue中设置,引入公共样式及个别页面的特殊样式common.css: 例如:<link rel="stylesheet" type="text/css" href="static/assets/css/common.css"> 下边的写法没用过参考链接中给的 <a href="http://home.cnblogs.com/u/134870/" target="_blan

vue provide和inject使用

provide和inject使用场景也是组件传值,尤其是祖父组件--孙组件等有跨度的组件间传值,记住是单向的.孙组件不能向祖父组件传值. provide 选项应该是一个对象或返回一个对象的函数.该对象包含可注入其子孙的属性. inject 通常是一个字符串数组. 示例: (1)祖父组件grandpaDom.vue: <template> <div> <father-dom :fooNew='fooNew'> </father-dom> </div>

vue 初步了解provide/inject

provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量. 需要注意的是 provide / inject这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效. (这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据.而不是局限于只能从当前父组件的prop属性来获取数据.) eg: 父组件中提供 provide() { r

vue中keep-alive实现前进刷新后退不刷新

利用keep-alive标签实现前进刷新后退不刷新需求:路由前进式能够刷新数据, 返回时页面保存之前的操作. >修改App.vue中router-view, 根据路由中meta字段设置的变量判断是否被展示 <template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> &l

vue刷新当前路由 router-view中的内容

通过改变router-view中的key来达到刷新组件的目的. <span class="refresh" title="刷新" @click="refresh"> <i class="iconfont">?</i> </span> <router-view :key="activeDate" /> 界面上有个刷新按钮,点击刷新的时候,执行函数,改