记录--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 ...
随机推荐
- js 获取css非行内样式，你应该了解的getComputedStyle方法
壹 ❀ 引 我们知道书写css有三种做法,它们分别是行内样式,内嵌样式和外部引用.我们来看个例子,下面这个div分别通过内部样式添加了颜色,内嵌样式添加了字体大小,外部引入样式添加了宽度. < ...
- windows网络流量监控
NPCap 官网 https://nmap.org/npcap/ 这是抓包必须先安装的工具,具体的原因可以看 https://github.com/buger/goreplay/wiki/Runnin ...
- go经典知识及总结
1.无论sync.Mutex还是其衍生品都会提示不能复制,但是能够编译运行 加锁后复制变量,会将锁的状态也复制,所以 mu1 其实是已经加锁状态,再加锁会死锁. 所以此题的答案是 fatal erro ...
- py.path模块
# https://py.readthedocs.io/en/latest/path.html import os dir_path = "/home/lw/" os.path.j ...
- 记录一个错误：Unable to find a match: python-dev
今天尝试在Linux下运行一个Python项目,在安装requirements.txt时报错 执行命令如下: [root@VM-16-8-centos cve-search]# pip3 instal ...
- pip相关知识
正常安装语法 # 安装单个 pip install some-package # 安装指定版本 pip install some-package==版本号 # 查看当前模块版本号 pip instal ...
- Python函数每日一讲 - 一文让你彻底掌握Python中的frozenset函数
引言 在 Python 中,frozenset() 函数是一个重要的工具,用于创建不可变的集合对象.本文将介绍 frozenset() 函数的语法.用法示例以及实际应用场景,帮助大家更好地理解和应用这 ...
- 【Azure Function】在Function执行中遇见Timeout错误
问题描述 在Function执行中遇见Timeout错误: Microsoft.Azure.WebJobs.Host.FunctionTimeoutException /Timeout value o ...
- 【Azure Key Vault】客户端获取Key Vault机密信息全部失败问题分析
问题描述 在应用中获取存储在Azure Key Vault的机密信息,全部失败. 报错日志内容如下: [reactor-http-epoll-4] [reactor.netty.http.client ...
- curl比较有用的参数
精选参数: --include // -i curl的输出中包含http头信息--verbose // 比-i更加丰富,>表示请求的信息, <表示curl接收的信息 *表示curl额外提 ...