Home  >  Article  >  Web Front-end  >  A brief analysis of how to refresh the current page in vue

A brief analysis of how to refresh the current page in vue

青灯夜游
青灯夜游forward
2023-01-14 19:24:082544browse

How does vue refresh the current page? The following article will introduce to you several implementation methods of Vue refreshing the current page. I hope it will be helpful to you!

A brief analysis of how to refresh the current page in vue

If you do operations such as adding/modifying/deleting etc. in a project, you usually need to refresh the data or refresh the current page.

Thinking

  • (1) If the page is simple, just call the interface to refresh the data.

  • (2) If the page is complex, you need to call Multiple interfaces or notifying multiple sub-components to refresh can be done by refreshing the current page. Here are 3 ways to refresh the current page. Each method has different ideas and has its own advantages and disadvantages

implementation

Method 1 - Via location.reload and $router.go(0) methods

(a) Overview

Pass# Both ##location.reload and $router.go(0) can achieve page refresh. It uses the browser refresh function, which is equivalent to pressing the f5 key to refresh the page.

  • Advantages: Simple enough

  • ##Disadvantages

    : There will be blank pages and poor user experience good. [Related recommendations: vuejs video tutorial, web front-end development]

(b) code

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)Preview

Link

Method 2 - Via Blank Page

(a) Overview

Through the

$router.replace

method, jump to a blank page, and then call back to the previous page, it uses vue-routerSwitching pages will destroy the page and create a new one

    ##Advantages
  • : There will be no blank page, good user experience

  • Disadvantages
  • : There will be a quick switching process in the address bar

  • (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 = {
    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)Preview

Link

Method 3-Through provide and inject

##(a) Overview

By 975b587bf85a482ea10b0a28848e78a4dd6e4ababe59793a4ac75fb9e5c5550e## on the parent page #Add v-if control

to refresh the page by destroying and recreating the page, and use

provide and inject to implement multi-level component communication. The parent page provides the reload method through provide, and the child page obtains the reload method through inject, and calls the method to refresh Advantages

: There will be no blank pages, there will be no quick switching process in the address bar, and the user experience is good
  • Disadvantages

    : The implementation is slightly complicated, involving
  • provide
  • and

    inject communication between multi-level components, and v-if control component creation and destruction, and$nextTickApplication of event loop(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)Preview

Link

(Learning video sharing:

vuejs introductory tutorial, Basic programming video

)

The above is the detailed content of A brief analysis of how to refresh the current page in vue. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:juejin.cn. If there is any infringement, please contact admin@php.cn delete