• 技术文章 >web前端 >Vue.js

    浅析vue中怎么刷新当前页面

    青灯夜游青灯夜游2023-01-14 19:24:08转载71

    vue怎么刷新当前页面?下面本篇文章给大家介绍一下vue刷新当前页面的几种实现方法,希望对大家有所帮助!

    项目当中如果做新增/修改/删除等等操作通常情况下都需要刷新数据或者刷新当前页面.

    思路

    实现

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

    (a)概述

    通过location.reload$router.go(0)都可以实现页面刷新,它利用浏览器刷新功能,相当于按下了f5键刷新页面

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

    (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('框架页加载')
        },
        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的控制来销毁和重新创建页面的方式刷新页面,并且用到provideinject实现多层级组件通信方式,父页面通过provide提供reload方法,子页面通过inject获取reload方法,调用方法做刷新

    (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>左侧菜单</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)预览

    链接

    (学习视频分享:vuejs入门教程编程基础视频

    以上就是浅析vue中怎么刷新当前页面的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:前端 Vue.js JavaScript
    上一篇:浅析Ref操作Dom在Vue2.x和Vue3.x的不同 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 详解Vue3响应式的两大利器:ref与reactive• 解析Vue2实现composition API的原理• vue路由有哪几种模式有什么区别• 图文详解Vue3实现全局搜索框步骤(附代码)• 在命令行执行命令什么表示初始化vue项目• vue3改了几个生命周期函数
    1/1

    PHP中文网