vue刷新当前页面

最新推荐文章于 2024-05-05 03:02:25 发布
最新推荐文章于 2024-05-05 03:02:25 发布
阅读量431 收藏 8
点赞数 8
分类专栏： 前端项目难点 文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Likestarr/article/details/135000025
版权

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

  • (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(){
            
            
            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(){
            
            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(){
        return {
            reload: this.reload
        }
    },
    data(){
        return {
            isRouterAlive: true
        }
    },
    methods: {
        async reload(){
            this.isRouterAlive = false
            
            await this.$nextTick()
            this.isRouterAlive = true
        }
    }
}

let Home = {
    template: `
        <div>
            首页
            <button @click="onClick">刷新</button>
        </div>
    `,
    created() {
        console.log('首页加载')
    },
    
    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)预览

链接

Web面试那些事儿
关注
  • 8
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue-router添加动态路由及无限刷新白屏和添加不生效问题_router(1)
2301_82244607的博客
04-29 975
疯狂编程学习效果可视化写博客阅读优秀代码心态调整。
VUE实现当前页面刷新的七种方法
热门推荐
weixin_40381947的博客
07-18 3万+
需要注意的是，使用该方法会刷新整个页面，包括Vue实例、组件以及其他的页面元素，可能会导致一些不必要的开销，不是最优的解决方案。需要注意的是，该方法会重新加载整个页面，如果想要对页面局部进行刷新，可以考虑使用 Vue 自身的一些特性，比如通过设置组件的 key 属性实现组件的更新，或者通过调用。具体来说，当某个组件的数据发生变化，但是该组件的视图没有及时更新，导致页面没有被正确渲染时，可以在需要刷新的组件中调用。方法可以简单地实现当前页面的刷新，这个方法会重新加载当前页面，类似于用户点击浏览器的刷新按钮。
【Vue】监控路由与路由参数, 刷新当前页面数据的几种方法
慕白Lee的博客
09-27 9855
在这个示例中，我们在组件的`data`选项中定义了一个`monitoredParam`属性，用于存储监控的参数值。当监控的参数发生变化时，`watch`函数会被触发，将新的参数值保存到组件的`monitoredParam`属性中。在这个示例中，我们在组件的`data`选项中定义了一个`monitoredRoute`属性，用于存储监控的路由信息。当路由发生变化时，`watch`函数会被触发，将新的路由信息保存到组件的`monitoredRoute`属性中。
记录--vue刷新当前页面
林恒的博客
03-28 714
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 背景 项目当中如果做新增/修改/删除等等操作通常情况下都需要刷新数据或者刷新当前页面. 思路 (1)如果页面简单,调用接口刷新数据即可. (2)如果页面复杂,需要调用多个接口或者通知多个子组件做刷新,可以采用刷新当前页面的方式 下面整理了4种方式来实现刷新当前页面,每种方式的思路不同,各有优缺点 实现 方式1-通过lo...
vue中实现页面刷新以及局部刷新的方法
qq_41117240的博客
10-12 9159
vue中实现页面刷新以及局部刷新的方法
vue项目如何刷新当前页面的方法
08-27
Vue 项目刷新当前页面方法 在 Vue 项目中，刷新当前页面是非常常见的需求，例如在处理列表时，常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。本文将介绍 Vue 项目如何刷新当前页面的方法。 问题...
Vue页面刷新记住页面状态的实现
10-15
在Vue开发中，有时我们需要实现页面刷新后仍然能记住用户在页面上的操作状态，比如搜索条件、筛选选项等。这通常涉及到页面状态的持久化。本文将详细介绍如何在Vue项目中实现这一功能。 首先，Vue提供了`...
vue项目刷新当前页面的三种方法
10-17
主要介绍了vue项目刷新当前页面的三种方法，本文图文并茂给大家介绍的非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue单页面实现当前页面刷新或跳转时提示保存
10-17
主要介绍了vue单页面实现当前页面刷新或跳转时提示保存，在当前页面刷新或跳转时提示保存并可取消刷新，以防止填写的表单内容丢失，感兴趣的小伙伴们可以参考一下
解决vue页面刷新或者后退参数丢失的问题
08-27
当我们离开当前页面时，<keep-alive> 会将当前页面的状态保存起来，待我们返回时，可以恢复到之前的状态。这可以一定程度上解决参数丢失的问题。 然而，这种方法有其局限性。首先，它需要在外套一层，这可能会增加...
vue.js实现刷新当前页面的方法教程
10-19
主要给大家介绍了关于vue.js实现刷新当前页面的方法教程，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
vue项目刷新当前页面的三种方式(重载当前页面数据,个人推荐第三种)
qq_42267338的博客
07-12 2036
vue项目刷新当前页面的三种方式(重载当前页面数据,个人推荐第三种)
vue5种方式实现页面“刷新“
lxs19930928的博客
12-04 6611
vue中五种方式实现页面“刷新” 1: 使用window.location.reload() 强制刷新 都会使页面有短暂的空白，体验效果不是特别好 home.vue <button @click="refreshPageHandler">刷新页面</button> methods: { refreshPageHandler() { console.log("点击刷新页面") window.location.reload() // 第一种
Vue刷新当前页面
huang_hai_an的博客
01-04 474
在Vue中，如果你想刷新当前页面，通常有几种方法可以选择。
vue-router@4 使用 -动态路由刷新页面请求（含history模式打包踩坑）
m0_49827178的博客
03-30 2682
添加一个导航守卫，在当前位置的组件将要离开时触发。类似于beforeRouteLeave ，但它可以在任何组件中使用。当组件被卸载时，导航守卫将被移除。当组件被卸载时，导航守卫将被移除。不同：beforeEach是在路由规则循环之前执行，beforeResolve是在组件被解析之后调用。需要注意，页面过渡效果需要在页面当中使用单个的div进行包裹，不然会警告。对象是一个响应式对象，所以它的任何属性都可以被监听，但你应该。在导航确认前被创建，组件还未被创建，还没有this。
2024年Web前端最全移动web：如何下载和使用Normalize(1)，前端高级面试视频
最新发布
2301_82243710的博客
05-05 300
原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。将Normalize.css文件下载完成之后，就可以使用Normalize.css初始化页面的默认样式。在图2所示的页面中，单击鼠标右键，然后在弹出的菜单中选择“另存为”，即可将Normalize.css保存到本地。
Vue中刷新页面的三种方式
01-04 1万+
Vue中刷新页面的三种方式Vue中刷新页面的三种方式
vue刷新当前页面的方法
06-01
可以使用以下方法刷新当前页面： ```javascript location.reload(); ``` 或者在Vue组件中使用以下方法： ```javascript this.$router.go(0); ``` 这将重新加载当前路由，从而刷新页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Web面试那些事儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值