Maison > Article > interface Web > Une brève analyse de la façon d'actualiser la page actuelle dans vue
Comment actualiser la page actuelle dans vue ? L'article suivant vous présentera plusieurs méthodes d'implémentation de Vue en actualisant la page actuelle. J'espère qu'il vous sera utile !
Si vous effectuez des opérations telles que l'ajout/modification/suppression, etc. dans le projet, vous devez généralement actualiser les données ou actualiser la page actuelle.
(1) Si la page c'est simple, appelez l'interface pour actualiser les données. C'est tout
(2) Si la page est complexe et doit appeler plusieurs interfaces ou notifier plusieurs sous-composants à actualiser, vous pouvez actualiser la page actuelle. Voici 3 façons d'actualiser la page actuelle. Chaque méthode a des idées différentes et a ses propres avantages et inconvénients
Méthode 1 - via les méthodes location.reload et $router.go(0)
(a) Présentation
L'actualisation de la page peut être réalisée via location.reload
et $router.go(0)
, qui utilise la fonction d'actualisation du navigateur. , équivalent à appuyer sur la touche f5
pour actualiser la pagelocation.reload
和$router.go(0)
都可以实现页面刷新,它利用浏览器刷新功能,相当于按下了f5
键刷新页面
(b)代码
76c82f278ac045591c9159d381de2c57 100db36a723c770d327fc0aef2ce13b1 93f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 db71bb30709ba44a555bb4f052ca6598 8f6d5a544bbc0d98e0f297ef053f784d b2386ffb911b14667cb8f0f91ea547a7Document6e916e0f7d1e588d4f442bf645aedb2f 2f08987855a26388ab9a38e30934a1372cacc6d41bbb37262a98f745aa00fbf0 146d57f813875e80bb84efaf4ce0e0d12cacc6d41bbb37262a98f745aa00fbf0 c9ccee2e6ea535a969eb3f532ad9fe89 * {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; } 531ac245ce3e4fe3d50054a55f265927 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d ab509c080ec9f7ec77efedb1cdcd4bed 975b587bf85a482ea10b0a28848e78a4dd6e4ababe59793a4ac75fb9e5c5550e 16b28748ea4df4d9c2150843fecfba68 36cc49f0c466276486e50c850b7e4956 3f1c4e4b6b16bbbd69b2ee476dc4f83a //框架页 let Layout = { created() { console.log('框架页加载') }, template: ` dc6dce4a544fdca2df29d5ac0ea9906b dc6dce4a544fdca2df29d5ac0ea9906b左侧菜单16b28748ea4df4d9c2150843fecfba68 dc6dce4a544fdca2df29d5ac0ea9906b975b587bf85a482ea10b0a28848e78a4dd6e4ababe59793a4ac75fb9e5c5550e16b28748ea4df4d9c2150843fecfba68 16b28748ea4df4d9c2150843fecfba68 ` } //首页 let Home = { template: ` dc6dce4a544fdca2df29d5ac0ea9906b 首页 22288cd9d7ad1476f72c780b7d10a8f2刷新65281c5ac262bf6d81768915a4a77ac0 16b28748ea4df4d9c2150843fecfba68 `, 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' }) 2cacc6d41bbb37262a98f745aa00fbf0 73a6ac4ed44ffec12cee46588e518a5e
(c)预览
方式2-通过空白页面
(a)概述
通过$router.replace
方法,跳转一个空白页面,然后再调回之前页面,它利用vue-router
切换页面会把页面销毁并新建新页面的特性
优点:不会出现页面空白,用户体验好
缺点:地址栏会出现快速切换的过程
(b)代码
<!DOCTYPE html> <html> <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> <div>左侧菜单</div> <div><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)概述
通过在父页面的975b587bf85a482ea10b0a28848e78a4dd6e4ababe59793a4ac75fb9e5c5550e
上添加v-if的控制
来销毁和重新创建页面的方式刷新页面,并且用到provide
和inject
实现多层级组件通信方式,父页面通过provide
提供reload
方法,子页面通过inject
获取reload
方法,调用方法做刷新
优点:不会出现页面空白,地址栏会不会出现快速切换的过程,用户体验好
缺点:实现稍复杂,涉及到provide
和inject
多层级组件间的通信,和v-if
控制组件创建和销毁,和$nextTick
: Assez simple
Inconvénients : Oui La page apparaît vide et l'expérience utilisateur n'est pas bonne. [Recommandations associées : tutoriel vidéo vuejs
, Développement Web front-end(b)Code<!DOCTYPE html>
<html>
<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>
<div>左侧菜单</div>
<!-- 通过v-if实现销毁和重新创建组件 -->
<div><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>
$router.replace
pour accéder à une page vierge, puis rappelez la page précédente. Il utilise vue-router
Changer de page détruira la page et créera une nouvelle page🎜contrôle v-if
sur le 975b587bf85a482ea10b0a28848e78a420634015ae42c45f45489e2d70706e34
>Actualisez la page en la détruisant et en la recréant, et utilisez provide
et inject
pour implémenter la communication des composants à plusieurs niveaux. passe provide
Fournissez la méthode reload
La sous-page obtient la méthode reload
via inject
et appelle la méthode pour. rafraîchir 🎜provide
Communication entre composants multi-niveaux avec inject
, contrôle de la création et de la destruction des composants avec v-if
, et application de la boucle d'événement $nextTick
🎜🎜 🎜🎜🎜(b) code🎜🎜rrreee🎜🎜(c) aperçu🎜🎜🎜🎜 lien🎜🎜🎜 (Partage de vidéos d'apprentissage : 🎜Tutoriel d'introduction à Vuejs🎜, 🎜Vidéo de programmation de base🎜)🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!