vue中如何刷新當(dāng)前頁面

這篇文章主要介紹了vue中如何刷新當(dāng)前頁面的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue中如何刷新當(dāng)前頁面文章都會(huì)有所收獲，下面我們一起來看看吧。

創(chuàng)新互聯(lián)主營望奎網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶App定制開發(fā),望奎h5小程序定制開發(fā)搭建,望奎網(wǎng)站營銷推廣歡迎望奎等地區(qū)企業(yè)咨詢

項(xiàng)目當(dāng)中如果做新增/修改/刪除等等操作通常情況下都需要刷新數(shù)據(jù)或者刷新當(dāng)前頁面.

思路

  • (1)如果頁面簡單,調(diào)用接口刷新數(shù)據(jù)即可.

  • (2)如果頁面復(fù)雜,需要調(diào)用多個(gè)接口或者通知多個(gè)子組件做刷新,可以采用刷新當(dāng)前頁面的方式 下面整理了3種方式來實(shí)現(xiàn)刷新當(dāng)前頁面,每種方式的思路不同,各有優(yōu)缺點(diǎn)

實(shí)現(xiàn)

方式1-通過location.reload和$router.go(0)方法

(a)概述

通過location.reload和$router.go(0)都可以實(shí)現(xiàn)頁面刷新,它利用瀏覽器刷新功能,相當(dāng)于按下了f5鍵刷新頁面

  • 優(yōu)點(diǎn):足夠簡單

  • 缺點(diǎn):會(huì)出現(xiàn)頁面空白,用戶體驗(yàn)不好。

(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>左側(cè)菜單</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)實(shí)現(xiàn)整體刷新頁面,會(huì)出現(xiàn)頁面閃爍
            // 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>

方式2-通過空白頁面

(a)概述

通過$router.replace方法,跳轉(zhuǎn)一個(gè)空白頁面,然后再調(diào)回之前頁面,它利用vue-router切換頁面會(huì)把頁面銷毀并新建新頁面的特性

  • 優(yōu)點(diǎn):不會(huì)出現(xiàn)頁面空白,用戶體驗(yàn)好

  • 缺點(diǎn):地址欄會(huì)出現(xiàn)快速切換的過程

(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>左側(cè)菜單</div>    
            <div><router-view></router-view></div>
        </div>
    `
}
//首頁
let Home = {
    template: `
        <div>
            首頁
            <button @click="onClick">刷新</button>
        </div>
    `,
    created() {
        console.log('首頁加載')
    },
    methods: {
        onClick(){
            //使用replace跳轉(zhuǎn)后不會(huì)留下 history 記錄,并通過redirect傳遞當(dāng)前頁面的路徑
            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>

方式3-通過provide和inject

(a)概述

通過在父頁面的<router-view></router-view>上添加v-if的控制來銷毀和重新創(chuàng)建頁面的方式刷新頁面,并且用到provide和inject實(shí)現(xiàn)多層級(jí)組件通信方式,父頁面通過provide提供reload方法,子頁面通過inject獲取reload方法,調(diào)用方法做刷新

  • 優(yōu)點(diǎn):不會(huì)出現(xiàn)頁面空白,地址欄會(huì)不會(huì)出現(xiàn)快速切換的過程,用戶體驗(yàn)好

  • 缺點(diǎn):實(shí)現(xiàn)稍復(fù)雜,涉及到provide和inject多層級(jí)組件間的通信,和v-if控制組件創(chuàng)建和銷毀,和$nextTick事件循環(huán)的應(yīng)用

(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 = {
    template: `
        <div>
            <div>左側(cè)菜單</div>    
            <!-- 通過v-if實(shí)現(xiàn)銷毀和重新創(chuàng)建組件 -->
            <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()產(chǎn)生一個(gè)微任務(wù),在一次dom事件循環(huán)后,重新創(chuàng)建組件
            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>

關(guān)于“vue中如何刷新當(dāng)前頁面”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“vue中如何刷新當(dāng)前頁面”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞標(biāo)題：vue中如何刷新當(dāng)前頁面
本文地址：http://muchs.cn/article44/gppjhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計(jì)、網(wǎng)站內(nèi)鏈、自適應(yīng)網(wǎng)站、App設(shè)計(jì)、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)