這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

背景

專案當中如果做新增/修改/洗掉等等操作通常情況下都需要重繪資料或者重繪當前頁面.

思路

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

(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 >
            <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)概述

通過在父頁面的<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 >
            <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>

(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 >
            <div >左側選單</div>    
            <!-- 通過:key系結$router.fullPath值,當fullPath發生改變,觸發組件重新渲染 -->
            <div ><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

如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/548490.html

標籤：其他

上一篇：JavaScript實作檔案上傳demo

下一篇：cookie時效無限延長方案

記錄--vue重繪當前頁面

這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

背景

思路

實作

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

(a)概述

(b)代碼

(c)預覽

方式2-通過空白頁面

(a)概述

(b)代碼

(c)預覽

方式3-通過provide和inject

(a)概述

(b)代碼

(c)預覽

方式4-通過給router-view系結key屬性

(a)概述

(b)代碼

(c)預覽

本文轉載于:

https://juejin.cn/post/7188103333440127037

如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，