vue项目刷新当前页面的三种方式(重载当前页面数据)

有关Vue项目刷新当前页面的三种方式，可以从以下三个方面展开说明：

1. 利用location.reload()方法进行页面刷新

在Vue中，可以通过调用浏览器原生的location.reload()方法来实现页面刷新。该方法会重新加载当前页面，重新发起一次网络请求，对页面元素进行重绘，因此能够实现重载当前页面数据的目的。可以在Vue组件中定义一个方法，通过window.location.reload()调用该方法来实现页面刷新，具体示例如下：

// 定义一个刷新页面的方法
function reloadPage() {
  window.location.reload();
}

new Vue({
  el: "#app",
  // 通过事件绑定调用刷新页面方法
  template: `
    <div>
      <button @click="reloadPage">刷新页面</button>
    </div>
  `,
  methods: {
    reloadPage
  }
});

上面的代码中，在Vue的template中绑定一个@click事件，通过this.reloadPage调用reloadPage方法实现刷新当前页面的功能。

2. 利用$route对象进行页面跳转

Vue路由的核心就是向router-view组件中动态渲染不同的组件，并且可以拥有类似于SPA的切换效果。因此，使用路由进行页面跳转也是一种刷新当前页面的方式。当在同一个路由路径之间进行跳转时，也能实现重新加载当前页面的效果。

可以在Vue组件中引入Vue-router，通过$route对象实现页面跳转的方式实现刷新当前页面，具体示例如下：

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

// 定义路由
const routes = [
  {
    path: "/",
    name: "home",
    component: () => import("./views/Home.vue")
  },
  {
    path: "/about",
    name: "about",
    component: () => import("./views/About.vue")
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

// 创建Vue实例
new Vue({
  router,
  el: "#app",
  template: `
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view></router-view>
  `
});

上面代码中使用了Vue-router，定义了两个路由"/"和"/about"，分别对应Home组件和About组件。当在页面上进行路由跳转时，Vue路由会重新渲染对应的组件，同时达到了刷新当前页面的效果。

3. 利用组件级别的刷新方式

如果需要动态地刷新组件内部数据，可以采用组件级别的刷新方式。Vue提供了<keep-alive>组件，可以用来缓存组件实例，防止重复渲染DOM，提高页面性能。同时，<keep-alive>还支持include和exclude属性，可以设置需要缓存或者不需要缓存的组件。当在组件内进行数据操作时，可以通过调用组件的$forceUpdate()方法来强制刷新组件，达到直接重新渲染当前组件的效果。

以下是一个利用<keep-alive>组件和$forceUpdate()方法实现组件级别刷新的示例代码：

// 注册一个组件
Vue.component("count", {
  data() {
    return {
      num: 0
    };
  },
  template: `
    <div>
      <p>Current count: {{ num }}</p>
      <button @click="increment">increment</button>
    </div>
  `,
  methods: {
    increment() {
      this.num++;
      // 调用$forceUpdate()方法刷新组件
      this.$forceUpdate();
    }
  }
});

// 创建Vue实例
new Vue({
  el: "#app",
  template: `
    <div>
      <keep-alive>
        <count></count>
      </keep-alive>
    </div>
  `
});

上面代码中定义了一个<count>组件，在组件内部通过$forceUpdate()方法强制刷新组件，达到了实时更新组件内部数据的效果。同时，使用<keep-alive>组件缓存了组件实例，可以提高页面的性能。