记录--vue刷新当前页面
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
背景
项目当中如果做新增/修改/删除等等操作通常情况下都需要刷新数据或者刷新当前页面.
思路
(1)如果页面简单,调用接口刷新数据即可.
(2)如果页面复杂,需要调用多个接口或者通知多个子组件做刷新,可以采用刷新当前页面的方式 下面整理了4种方式来实现刷新当前页面,每种方式的思路不同,各有优缺点
实现
方式1-通过location.reload和$router.go(0)方法
(a)概述
通过location.reload和$router.go(0)都可以实现页面刷新,它利用浏览器刷新功能,相当于按下了f5键刷新页面
优点:足够简单
缺点:会出现页面空白,用户体验不好
(b)代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/3.5.3/vue-router.min.js" type="application/javascript"></script>
<style>
* {padding:0;margin:0;}
.container { padding: 10px;display: flex;flex-basis: auto;height: 100vh;box-sizing: border-box;}
.aside{ width:200px;background-color: #d3dce6; }
.main { flex: 1; }
</style>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
<script>
//框架页
let Layout = {
created() {
console.log('框架页加载')
},
template: `
<div class="container">
<div class="aside">左侧菜单</div>
<div class="main"><router-view></router-view></div>
</div>
`
}
//首页
let Home = {
template: `
<div>
首页
<button @click="onClick">刷新</button>
</div>
`,
created() {
console.log('首页加载')
},
methods: {
onClick(){
// 通localtion.reload或者this.$router.go(0)实现整体刷新页面,会出现页面闪烁
// location.reload()
this.$router.go(0)
}
},
}
//路由配置
let router = new VueRouter({
routes: [
{path: '/', component: Layout, children:[
{path: '', component: Home}
]}
]
})
Vue.use(VueRouter)
//根组件
new Vue({
router,
el: '#app'
})
</script>
</html>
(c)预览
方式2-通过空白页面
(a)概述
通过$router.replace方法,跳转一个空白页面,然后再调回之前页面,它利用vue-router切换页面会把页面销毁并新建新页面的特性
优点:不会出现页面空白,用户体验好
缺点:地址栏会出现快速切换的过程
(b)代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/3.5.3/vue-router.min.js" type="application/javascript"></script>
<style>
* {padding:0;margin:0;}
.container { padding: 10px;display: flex;flex-basis: auto;height: 100vh;box-sizing: border-box;}
.aside{ width:200px;background-color: #d3dce6; }
.main { flex: 1; }
</style>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
<script>
//框架页
let Layout = {
created() {
console.log('框架页加载')
},
template: `
<div class="container">
<div class="aside">左侧菜单</div>
<div class="main"><router-view></router-view></div>
</div>
`
}
//首页
let Home = {
template: `
<div>
首页
<button @click="onClick">刷新</button>
</div>
`,
created() {
console.log('首页加载')
},
methods: {
onClick(){
//使用replace跳转后不会留下 history 记录,并通过redirect传递当前页面的路径
this.$router.replace(`/blank?redirect=${this.$route.fullPath}`)
}
},
}
//空白页面
let Blank = {
created(){
console.log('空白页加载')
//重新跳回之前的页面
this.$router.replace(this.$route.query.redirect)
},
template: `
<div></div>
`
}
//路由配置
let router = new VueRouter({
routes: [
{path: '/', component: Layout, children:[
{path: '', component: Home}
]},
//配置空白页面的路由
{path: '/blank', component: Layout, children:[
{path: '', component: Blank}
]}
]
})
Vue.use(VueRouter)
//根组件
new Vue({
router,
el: '#app'
})
</script>
</html>
(c)预览
方式3-通过provide和inject
(a)概述
通过在父页面的<router-view></router-view>上添加v-if的控制来销毁和重新创建页面的方式刷新页面,并且用到provide和inject实现多层级组件通信方式,父页面通过provide提供reload方法,子页面通过inject获取reload方法,调用方法做刷新
优点:不会出现页面空白,地址栏会不会出现快速切换的过程,用户体验好
缺点:实现稍复杂,涉及到provide和inject多层级组件间的通信,和v-if控制组件创建和销毁,和$nextTick事件循环的应用
(b)代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/3.5.3/vue-router.min.js" type="application/javascript"></script>
<style>
* {padding:0;margin:0;}
.container { padding: 10px;display: flex;flex-basis: auto;height: 100vh;box-sizing: border-box;}
.aside{ width:200px;background-color: #d3dce6; }
.main { flex: 1; }
</style>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
<script>
//框架页
let Layout = {
template: `
<div class="container">
<div class="aside">左侧菜单</div>
<!-- 通过v-if实现销毁和重新创建组件 -->
<div class="main"><router-view v-if="isRouterAlive"></router-view></div>
</div>
`,
created() {
console.log('框架页加载')
},
// 通过provide提供reload方法给后代组件
provide(){
return {
reload: this.reload
}
},
data(){
return {
isRouterAlive: true
}
},
methods: {
async reload(){
this.isRouterAlive = false
//通过this.$nextTick()产生一个微任务,在一次dom事件循环后,重新创建组件
await this.$nextTick()
this.isRouterAlive = true
}
}
}
//首页
let Home = {
template: `
<div>
首页
<button @click="onClick">刷新</button>
</div>
`,
created() {
console.log('首页加载')
},
//通过inject获取祖先元素的reload方法
inject: ['reload'],
methods: {
onClick(){
this.reload()
}
},
}
//路由配置
let router = new VueRouter({
routes: [
{path: '/', component: Layout, children:[
{path: '', component: Home}
]}
]
})
Vue.use(VueRouter)
//根组件
new Vue({
router,
el: '#app'
})
</script>
</html>
(c)预览
方式4-通过给router-view绑定key属性
(a)概述
通过在父页面的<router-view></router-view>上绑定和切换key属性,来销毁和重新创建页面的方式刷新页面,具体的方式是指定key的值为$route.fullPath,通过在子页面通过this.$router.push(this.$route.path+'?t='+Date.now())来改变$route.fullPath的值,从而刷新页面
优点:不会出现页面空白,并且代码简单 缺点:地址栏出现随机参数
(b)代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/3.5.3/vue-router.min.js" type="application/javascript"></script>
<style>
* {padding:0;margin:0;}
.container { padding: 10px;display: flex;flex-basis: auto;height: 100vh;box-sizing: border-box;}
.aside{ width:200px;background-color: #d3dce6; }
.main { flex: 1; }
</style>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
<script>
//框架页
let Layout = {
template: `
<div class="container">
<div class="aside">左侧菜单</div>
<!-- 通过:key绑定$router.fullPath值,当fullPath发生改变,触发组件重新渲染 -->
<div class="main"><router-view :key="$route.fullPath"></router-view></div>
</div>
`,
created() {
console.log('框架页加载')
}
}
//首页
let Home = {
template: `
<div>
首页
<button @click="onClick">刷新</button>
</div>
`,
created() {
console.log('首页加载')
},
methods: {
onClick(){
this.$router.push(`${this.$route.path}?t=${Date.now()}`)
}
},
}
//路由配置
let router = new VueRouter({
routes: [
{path: '/', component: Layout, children:[
{path: '', component: Home}
]}
]
})
Vue.use(VueRouter)
//根组件
new Vue({
router,
el: '#app'
})
</script>
</html>
(c)预览
本文转载于:
https://juejin.cn/post/7188103333440127037
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
记录--vue刷新当前页面的更多相关文章
- URL不变的情况下，最实用的vue刷新当前页面，provide / inject 组合 方式实现vue页面刷新
原文:https://blog.csdn.net/Dream_xun/article/details/83024487 其他参考:https://blog.csdn.net/liyunkun888/a ...
- Vue 刷新当前页面，并重新加载页面数据
业务场景:在管理后台,在执行完,增,删,改,操作的时候.我们需要刷新一下页面,重载数据.在JQ中我们会用到location.reload()方法,刷新页面:在vue中,这里需要用到一个 provide ...
- vue刷新本页面
顶层app.vue页面 <template> <div id="app"> <router-view v-if="isRouterAlive ...
- 解决Vue刷新后页面数据丢失的问题（sessionStorage和localStorage的用法）
一.为什么刷新后数据会丢失 vuex存储的数据只是在页面中,相当于全局变量,页面刷新的时候vuex里的数据会重新初始化,导致数据丢失. 因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重 ...
- vue 刷新当前页面
情景: 比如在删除或者增加一条记录的时候希望当前页面可以重新刷新 请求接口中直接将数组结果取第0个数组或者第n个数组给变量,会报错 0 的错误,此时多次刷新即可 方法一.这种方法简单快捷,但是页面会有 ...
- vue刷新子页面，跳到主页，params传参引起的血案！
今天,算是真正认识了params传参,为什么说params传参引起了血案? 起因是这样的,我正在做一个登陆的模块,公司想根据url不同的参数来区分是什么类型的会议, 于是后端推荐我用params传参的 ...
- 解决：Vue刷新/载入页面，出现双括号闪现后消失
https://cn.vuejs.org/v2/api/#v-cloak v-cloak 不需要表达式 用法: 这个指令保持在元素上直到关联实例结束编译.和 CSS 规则如 [v-cloak] { d ...
- 转：vue项目如何刷新当前页面
想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://loca ...
- 关于Vue 刷新页面
前言 Vue 中是单页面,当然需要刷新数据咯 你一定遇到这样的需求::比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者 这个页面有个组件 ,但是这个组件里面的点击事件还是到当前页面 怎么就 ...
- vue项目如何刷新当前页面
1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.rel ...
随机推荐
- Java基础综合测试
Java版基础练习题: 输入练习: [问题描述] 任务很简单: 给定若干个整数,请编程输出它们的和. [输入形式] 输入包含多组测试用例. 每组测试数据首先是一个正整数N,表示本组数据有N个整数. 请 ...
- DS1302与STC12的连接电路和驱动实现
简介 DS1302是低功耗带RAM的实时时钟电路, 常见的SOP8封装体积很小, 它可以对年月日周时分秒进行计时, 具有闰年补偿功能, 工作电压为2.0V-5.5V, 采用三线接口与CPU进行同步通信 ...
- 我的小程序之旅八：基于weixin-java-mp实现微信公众号被动回复消息
在微信里有这样一个公众号[华为运动健康],当点击最新排行的时候,公众号就会发送今天最新的运动步数给你.如下图: 这里有两种格式的消息 1.有头像框,有聊天框--普通消息 2.消息有样式.颜色等--模板 ...
- kafka学习笔记03-消息生产者producer
kafka学习笔记03-消息生产者producer 发送消息整体流程示意图 消息发送的流程示意图: (From:High-level overview of Kafka producer compon ...
- 学习go语言编程之数据类型
数据类型概述 Golang语言内置了如下基础数据类型: 布尔类型:bool 整型:int8,unit8,int16,uint16,int32,uint32,int64,uint64,int,uint, ...
- python字典操作的大O效率
- 并发与并行的区别---python
并发与并行的区别 Erlang 之父 Joe Armstrong 用一张5岁小孩都能看懂的图解释了并发与并行的区别 并发是两个队列交替使用一台咖啡机,并行是两个队列同时使用两台咖啡机 如果是串行,一个 ...
- 【NLP学习其3.5】词嵌入的特性，为什么词之间会有联系？
词嵌入的特性 现在你有了一堆嵌入向量,我们可以开始学习他们之间的特性了 前情提要:https://www.cnblogs.com/DAYceng/p/14962528.html 先把各向量重新命名便于 ...
- 第一百零一篇:DOM节点类型
好家伙, DOM DOM是javascript操作网页的接口,全称为文档对象模型(Document Object Model).它的作用是将网页转为一个javascript对象, 从而可以使用ja ...
- 【Azure 事件中心】Event Hubs如何获取其中存放的历史消息
问题描述 使用Azure Event Hub服务,除了正常的生产,消费消息以外,如果想拿到Event Hub中存储的历史消息?有什么方法呢? 问题解答 获取 Event Hubs 存储的历史消息,首先 ...