Eine kurze Analyse, wie Sie die aktuelle Seite in Vue aktualisieren-View.js-php.cn

Wie aktualisiere ich die aktuelle Seite in Vue? Der folgende Artikel stellt Ihnen verschiedene Implementierungsmethoden von Vue vor und aktualisiert die aktuelle Seite. Ich hoffe, er wird Ihnen hilfreich sein!

Eine kurze Analyse, wie Sie die aktuelle Seite in Vue aktualisieren

Wenn Sie im Projekt Vorgänge wie Hinzufügen/Ändern/Löschen usw. ausführen, müssen Sie normalerweise die Daten oder die aktuelle Seite aktualisieren.

Idee

(1) Wenn die Seite ist einfach: Rufen Sie die Schnittstelle auf, um die Daten zu aktualisieren. Das ist alles
(2) Wenn die Seite komplex ist und mehrere Schnittstellen aufrufen oder mehrere Unterkomponenten zur Aktualisierung benachrichtigen muss, können Sie die aktuelle Seite aktualisieren. Hier sind 3 Möglichkeiten, die aktuelle Seite zu aktualisieren. Jede Methode hat unterschiedliche Ideen und ihre eigenen Vor- und Nachteile. Methode 1 – über die Methoden location.reload und $router.go(0).

(a) Übersicht

Die Seitenaktualisierung kann sowohl über location.reload als auch über $router.go(0) erreicht werden, das die Browser-Aktualisierungsfunktion verwendet , entspricht dem Drücken der Taste f5 zum Aktualisieren der Seite

Vorteile

: Ja Die Seite erscheint leer und die Benutzererfahrung ist nicht gut. [Verwandte Empfehlungen: vuejs-Video-Tutoriallocation.reload和$router.go(0)都可以实现页面刷新,它利用浏览器刷新功能,相当于按下了f5键刷新页面

优点:足够简单
缺点:会出现页面空白,用户体验不好。【相关推荐：vuejs视频教程、web前端开发】

(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(){
            // 通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>

Nach dem Login kopieren

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

Nach dem Login kopieren

(c)预览

链接

方式3-通过provide和inject

(a)概述

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

优点:不会出现页面空白,地址栏会不会出现快速切换的过程,用户体验好
缺点:实现稍复杂,涉及到provide和inject多层级组件间的通信,和v-if控制组件创建和销毁,和$nextTick, Web-Frontend-Entwicklung
]

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

Nach dem Login kopieren

(c)Vorschau

Link

Methode 2 – Durch eine leere Seite

🎜🎜(a) Übersicht🎜🎜🎜Verwenden Sie die Methode $router.replace, um zu einer leeren Seite zu springen, und rufen Sie dann zurück die vorherige Seite. Es wird vue-router verwendet. Beim Wechseln der Seiten wird die Seite zerstört und eine neue Seite erstellt Es wird keine leeren Seiten geben. Gute Benutzererfahrung. Nachteile: Es erfolgt ein schneller Wechselvorgang in der Adressleiste a href="https://www .php.cn/link/8fd541073cd0266ab7070498cb5e3cd2" target="_blank" title="https://jsrun.net/micKp/edit" ref="nofollow noopener noreferrer">Link 🎜🎜🎜 🎜🎜Methode 3 – durch Bereitstellen und Injizieren 🎜🎜🎜🎜🎜(a) Übersicht🎜🎜🎜Durch Hinzufügen von v-if control auf dem <router-view></ der übergeordneten Seite router-view> >Aktualisieren Sie die Seite, indem Sie sie zerstören und neu erstellen, und verwenden Sie provide und inject, um eine mehrstufige Komponentenkommunikation zu implementieren code>provide Stellen Sie die Methode reload bereit. Die Unterseite erhält die Methode reload über inject und ruft die Methode zum Aktualisieren auf 🎜

provide

inject

v-if code> und Anwendung der <code>$nextTick

Das obige ist der detaillierte Inhalt vonEine kurze Analyse, wie Sie die aktuelle Seite in Vue aktualisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!