使用this.$router.replace()，跳到一個(gè)空白頁(yè)，然后this.$router.replace()重新跳回來
使用this.$router.replace()的原因是，其實(shí)跟this.$router.push()效果一樣，但是this.$router.replace()不會(huì)記錄到history里，不留痕跡
甚至不用打開空白頁(yè)，直接用beforeRouteEnter攔截跳回原來頁(yè)面

2. 實(shí)現(xiàn)過程

2.1 新建一個(gè)名為refresh.vue的文件

2.2 在refresh.vue里添加 beforeRouteEnter

<template> </template>
<script>
export default {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$router.replace(from.path)
      // 跳到該路由頁(yè)面后，再替換為from.path來源路徑
    })
  }
}
</script>

2.3 在路由文件里，加上refresh 的路由

    {
      path: '/refresh',
      component: resolve => require(['@/pages/refresh'], resolve),
      meta: {
        title: '用于同路由刷新'
      }
    }

2.4 當(dāng)你想刷新當(dāng)前頁(yè)面的時(shí)候，可以調(diào)用下面這段代碼

this.$router.replace('/refresh')

over，enjoy！

到此這篇關(guān)于VUE同一路由強(qiáng)制刷新頁(yè)面的文章就介紹到這了,更多相關(guān)vue路由強(qiáng)制刷新頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

深入探索VueJS Scoped CSS 實(shí)現(xiàn)原理
這篇文章主要介紹了深入探索VueJS Scoped CSS 實(shí)現(xiàn)原理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
vue如何實(shí)現(xiàn)垂直居中
這篇文章主要介紹了vue如何實(shí)現(xiàn)垂直居中，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue.js多頁(yè)面開發(fā)環(huán)境搭建過程
利用 vue-cli 搭建的項(xiàng)目大都是單頁(yè)面應(yīng)用項(xiàng)目，對(duì)于簡(jiǎn)單的項(xiàng)目，單頁(yè)面就能滿足要求。這篇文章主要介紹了vue.js多頁(yè)面開發(fā)環(huán)境搭建 ,需要的朋友可以參考下
2019-04-04
基于Vue和Firebase實(shí)現(xiàn)一個(gè)實(shí)時(shí)聊天應(yīng)用
在本文中,我們將學(xué)習(xí)如何使用Vue.js和Firebase來構(gòu)建一個(gè)實(shí)時(shí)聊天應(yīng)用,Vue.js是一種流行的JavaScript前端框架,而Firebase是Google提供的實(shí)時(shí)數(shù)據(jù)庫(kù)和后端服務(wù),結(jié)合這兩者,我們可以快速搭建一個(gè)功能強(qiáng)大的實(shí)時(shí)聊天應(yīng)用,需要的朋友可以參考下
2023-08-08
Vue render函數(shù)使用詳細(xì)講解
vue中的render函數(shù),它返回的是一個(gè)虛擬節(jié)點(diǎn)vnode,也就是我們要渲染的節(jié)點(diǎn),下面這篇文章主要給大家介紹了關(guān)于Vue中render函數(shù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
Vue如何使用Element-ui表單發(fā)送數(shù)據(jù)與多張圖片到后端詳解
在做項(xiàng)目的時(shí)候遇到一個(gè)問題,前端需要上傳表單到后端,表單數(shù)據(jù)包括文本內(nèi)容和圖片,這篇文章主要給大家介紹了關(guān)于Vue如何使用Element-ui表單發(fā)送數(shù)據(jù)與多張圖片到后端的相關(guān)資料,需要的朋友可以參考下
2022-04-04
詳解vue2.0模擬后臺(tái)json數(shù)據(jù)
這篇文章主要介紹了vue2.0模擬后臺(tái)json數(shù)據(jù)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
Vue+Element UI+Lumen實(shí)現(xiàn)通用表格分頁(yè)功能
這篇文章主要介紹了Vue+Element UI+Lumen實(shí)現(xiàn)通用表格分頁(yè)功能，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-02-02
vue.js引入外部CSS樣式和外部JS文件的方法
這篇文章主要介紹了vue.js引入外部CSS樣式和外部JS文件的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-01-01
在vue項(xiàng)目中使用md5加密的方法
這篇文章主要介紹了在vue項(xiàng)目中使用md5加密的方法,需要的朋友可以參考下
2018-09-09