Vue同一路由強(qiáng)制刷新頁面的實(shí)現(xiàn)過程
更新時(shí)間：2022年08月15日 11:26:59 作者：Scoful
這篇文章主要介紹了解決VUE同一路由強(qiáng)制刷新頁面的問題，本文給大家分享實(shí)現(xiàn)過程，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
1. 思路
- 使用
this.$router.replace()，跳到一個(gè)空白頁，然后this.$router.replace()重新跳回來 - 使用
this.$router.replace()的原因是，其實(shí)跟this.$router.push()效果一樣，但是this.$router.replace()不會記錄到history里，不留痕跡 - 甚至不用打開空白頁，直接用
beforeRouteEnter攔截跳回原來頁面
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)
// 跳到該路由頁面后，再替換為from.path來源路徑
})
}
}
</script>2.3 在路由文件里，加上refresh 的路由
{
path: '/refresh',
component: resolve => require(['@/pages/refresh'], resolve),
meta: {
title: '用于同路由刷新'
}
}2.4 當(dāng)你想刷新當(dāng)前頁面的時(shí)候，可以調(diào)用下面這段代碼
this.$router.replace('/refresh')over，enjoy！
到此這篇關(guān)于VUE同一路由強(qiáng)制刷新頁面的文章就介紹到這了,更多相關(guān)vue路由強(qiáng)制刷新頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+elementUI組件tree如何實(shí)現(xiàn)單選加條件禁用
這篇文章主要介紹了vue+elementUI組件tree如何實(shí)現(xiàn)單選加條件禁用，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue項(xiàng)目如何部署運(yùn)行到tomcat上
這篇文章主要介紹了vue項(xiàng)目如何部署運(yùn)行到tomcat上的問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
vue keep-alive請求數(shù)據(jù)的方法示例
本篇文章主要介紹了vue keep-alive請求數(shù)據(jù)的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
在Vue中進(jìn)行數(shù)據(jù)分頁的實(shí)現(xiàn)方法
在前端開發(fā)中,數(shù)據(jù)分頁是一個(gè)常見的需求,特別是當(dāng)處理大量數(shù)據(jù)時(shí),Vue作為一款流行的JavaScript框架,提供了強(qiáng)大的工具和生態(tài)系統(tǒng)來實(shí)現(xiàn)數(shù)據(jù)分頁,本文將介紹如何在Vue中進(jìn)行數(shù)據(jù)分頁,以及如何設(shè)計(jì)一個(gè)通用的分頁組件,需要的朋友可以參考下2023-10-10
這篇文章主要為大家介紹了Yarn與Lerna管理monorepo的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
element-ui中實(shí)現(xiàn)tree子節(jié)點(diǎn)部分選中時(shí)父節(jié)點(diǎn)也選中
這篇文章主要介紹了element-ui中實(shí)現(xiàn)tree子節(jié)點(diǎn)部分選中時(shí)父節(jié)點(diǎn)也選中的方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
詳解vuex中action何時(shí)完成以及如何正確調(diào)用dispatch的思考
這篇文章主要介紹了詳解vuex中action何時(shí)完成以及如何正確調(diào)用dispatch的思考，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了如何寫一個(gè) Vue3 的自定義指令，如果我們想在 Vue.js 的項(xiàng)目中實(shí)現(xiàn)圖片懶加載，那么用自定義指令就再合適不過了，那么接下來就讓我手把手帶你用 Vue3 去實(shí)現(xiàn)一個(gè)圖片懶加載的自定義指令 v-lazy,需要的朋友可以參考一下2022-01-01
詳解keep-alive + vuex 讓緩存的頁面靈活起來
這篇文章主要介紹了keep-alive + vuex 讓緩存的頁面靈活起來，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue實(shí)現(xiàn)設(shè)置載入動畫和初始化頁面動畫效果
今天小編就為大家分享一篇vue實(shí)現(xiàn)設(shè)置載入動畫和初始化頁面動畫效果，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10