Vue 重新整理的常見方法

在網頁面裡的動線流程,常會遇到需要重整的時候,但 Vue 是用 Vue router 路由管理器去管理路由,要怎麼實現重新整理呢?有以下幾個方法:

this.$router.go(0)

export default {
  methods: {
    changeRouter() {
      this.$router.go(0);
    }
  }
};

這方法像一般重整的方法一樣,會有白頁閃一下的情形!


location.reload()

export default {
  name: "ReloadPaage",
  methods: {
    changeRouter() {
      location.reload();
    }
  }
};

這跟上面一樣,也是會有白頁閃一下的情況!


跳轉空白頁再跳回原頁面

可以先產生一個 ReloadPaage Components,裡面是空內容,主要是 Vue 裡要放上 beforeRouteEnter 去執行回到原頁,如下:

<template>
  <div></div>
</template>

template 裡面為空內容,script 如下:

export default {
  name: "ReloadPaage",
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$router.replace(from.path);
    });
  }
};

要記得 router 要加上空白頁的 path,參考如下:

import Vue from "vue";
import VueRouter from "vue-router";
import ReloadPaage from "@/views/ReloadPaage.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/reloadPaage",
    name: "ReloadPaage",
    component: ReloadPaage
  }
];

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

export default router;

接著,在你要執行重整的地方使用 this.$router.push('/reloadPaage'); ,如下:

export default {
  name: "ReloadPaage",
  methods: {
    changeRouter() {
      this.$router.push('/reloadPaage');
    }
  }
};

這樣可以達到重整的效果!


參考網址

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *