Vue中刷新页面的四种方法

大家好，欢迎来到IT知识分享网。

当用户执行完某个动作，改变了某些状态，需要重新刷新页面，以此来重新渲染页面。如：用户登录成功、增加、删除、更新等。

1、原始方法：

location.reload();

​watch: { $route(to, from) { window.location.reload(); //监测到路由发生跳转时刷新一次页面 }, }, ​

2、vue自带的路由跳转：

this.$router.go(0);

前两者都是强制刷新页面，会出现短暂的闪烁，用户体验效果不好。故最好选用第3种，如下：

3、首先在App里面写下如下代码：

<template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div> </template> <script> export default { name: 'App', provide () { //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。 return { reload: this.reload } }, data() { return{ isRouterAlive: true //控制视图是否显示的变量 } }, methods: { reload () { this.isRouterAlive = false; //先关闭， this.$nextTick(function () { this.isRouterAlive = true; //再打开 }) } }， } </script>

然后，可以在需要刷新页面的组件里这样写（在需要刷新页面的代码块中使用）：

export default { inject:['reload'], //注入App里的reload方法 data () { return { ....... } }, 

4、当某个页面下滑到一定程度后进入一个新的页面，新页面也会停留在上个页面下滑到的位置，这时候其实我们想要的效果是，打开的新页面自动刷新一次，保证新页面停留在最顶部，可在路由中配置：

scrollBehavior是在createRouter时传入的一个方法，比如我们要在跳转页面时，页面总是滚到顶部

const router = createRouter({ scrollBehavior(to, from, savedPosition) { // 始终滚动到顶部 return { x: 0 ,y: 0} }, }) 

const router = createRouter({ scrollBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } }, })