记录--vue刷新当前页面

Posted 2023-03-28 林恒

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了记录--vue刷新当前页面相关的知识，希望对你有一定的参考价值。

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

背景

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

思路

(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 class="container">
            <div class="aside">左侧菜单</div>    
            <div class="main"><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 class="container">
            <div class="aside">左侧菜单</div>    
            <div class="main"><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 class="container">
            <div class="aside">左侧菜单</div>    
            <!-- 通过v-if实现销毁和重新创建组件 -->
            <div class="main"><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 class="container">
            <div class="aside">左侧菜单</div>    
            <!-- 通过:key绑定$router.fullPath值,当fullPath发生改变,触发组件重新渲染 -->
            <div class="main"><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

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

以上是关于记录--vue刷新当前页面的主要内容，如果未能解决你的问题，请参考以下文章