Maison  >  Article  >  interface Web  >  Une brève analyse de la façon d'actualiser la page actuelle dans vue

Une brève analyse de la façon d'actualiser la page actuelle dans vue

青灯夜游
青灯夜游avant
2023-01-14 19:24:082525parcourir

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 !

Une brève analyse de la façon d'actualiser la page actuelle dans vue

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.

Idée

  • (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

implémentation

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(&#39;框架页加载&#39;)
    },
    template: `
        <div>
            <div>左侧菜单</div>    
            <div><router-view></router-view></div>
        </div>
    `
}
//首页
let Home = {
    template: `
        <div>
            首页
            <button @click="onClick">刷新</button>
        </div>
    `,
    created() {
        console.log(&#39;首页加载&#39;)
    },
    methods: {
        onClick(){
            //使用replace跳转后不会留下 history 记录,并通过redirect传递当前页面的路径
            this.$router.replace(`/blank?redirect=${this.$route.fullPath}`)
        }
    },
}
//空白页面
let Blank = {
    created(){
        console.log(&#39;空白页加载&#39;)
        //重新跳回之前的页面
        this.$router.replace(this.$route.query.redirect)
    },
    template: `
        <div></div>        
    `
}
//路由配置
let router = new VueRouter({
    routes: [
        {path: &#39;/&#39;, component: Layout, children:[
            {path: &#39;&#39;, component: Home}
        ]},
        //配置空白页面的路由
        {path: &#39;/blank&#39;, component: Layout, children:[
            {path: &#39;&#39;, component: Blank}
        ]}
    ]
}) 
Vue.use(VueRouter)
//根组件
new Vue({
    router,
    el: &#39;#app&#39;
})
</script>
</html>

(c)预览

链接

方式3-通过provide和inject

(a)概述

通过在父页面的975b587bf85a482ea10b0a28848e78a4dd6e4ababe59793a4ac75fb9e5c5550e上添加v-if的控制来销毁和重新创建页面的方式刷新页面,并且用到provideinject实现多层级组件通信方式,父页面通过provide提供reload方法,子页面通过inject获取reload方法,调用方法做刷新

  • 优点:不会出现页面空白,地址栏会不会出现快速切换的过程,用户体验好

  • 缺点:实现稍复杂,涉及到provideinject多层级组件间的通信,和v-if控制组件创建和销毁,和$nextTick

    Avantages

     : 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(&#39;框架页加载&#39;)
        },
        // 通过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(&#39;首页加载&#39;)
        },
        //通过inject获取祖先元素的reload方法
        inject: [&#39;reload&#39;],
        methods: {
            onClick(){
                this.reload()
            }
        },
    }
    //路由配置
    let router = new VueRouter({
        routes: [
            {path: &#39;/&#39;, component: Layout, children:[
                {path: &#39;&#39;, component: Home}
            ]}
        ]
    }) 
    Vue.use(VueRouter)
    //根组件
    new Vue({
        router,
        el: &#39;#app&#39;
    })
    </script>
    </html>

    (c)Aperçu🎜 🎜🎜 Lien 🎜🎜 🎜🎜🎜Méthode 2 - Via une page vierge🎜🎜🎜🎜🎜(a) Présentation🎜🎜🎜Utilisez la méthode $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🎜
      🎜🎜🎜Avantages🎜 : Là il n'y aura pas de page vierge, Bonne expérience utilisateur🎜🎜🎜🎜🎜Inconvénients🎜 : Il y aura un processus de changement rapide dans la barre d'adresse🎜🎜🎜🎜🎜(b) Code🎜🎜rrreee🎜🎜(c) Aperçu🎜🎜🎜Lien 🎜🎜🎜 🎜🎜Méthode 3 - via fournir et injecter 🎜🎜🎜🎜🎜(a) Présentation🎜🎜🎜En ajoutant un 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 🎜
        🎜🎜🎜Avantages🎜 : Il n'y aura pas de pages vierges, il n'y aura pas de processus de changement rapide dans la barre d'adresse et l'expérience utilisateur est bonne🎜🎜 🎜🎜🎜Inconvénients🎜 : L'implémentation est légèrement compliquée, impliquant provideCommunication 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!

    Déclaration:
    Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer