A brief analysis of how to refresh the current page in vue-Vue.js-php.cn

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

青灯夜游

Release： 2023-01-14 19:24:08

forward

2502 people have browsed it

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

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

Copy after login

(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

: There will be no blank page, good user experience
: There will be a quick switching process in the address bar

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

Copy after login

(c)Preview

Link

Method 3-Through provide and inject

##(a) Overview

By ## 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
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>

Copy after login

(c)Preview

Link

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!