場景一：描述

當(dāng)我們在瀏覽了多個(gè)頁面之后，token到期。這時(shí)候系統(tǒng)應(yīng)該強(qiáng)制用戶登出，雖然用戶登出了但如果不清除之前的瀏覽歷史，點(diǎn)擊瀏覽器的返回按鈕，瀏覽器仍然會回退到之前的頁面。

在之前的瀏覽了多少個(gè)頁面不確定的情況下，想要清空瀏覽歷史也比較麻煩。最主要按照我之前的思路，路由Router還不讓清理。

let app = new Vue({
    beforeCreate() {
    },
    mounted(){
    },
    'el': '#app',
    router,
    'render': h => h(App)
});

每個(gè)Vue應(yīng)用都會創(chuàng)建一個(gè)Vue實(shí)例，然后給這個(gè)實(shí)例傳入router參數(shù)。

router中的內(nèi)容非常簡單，直接創(chuàng)建路由棧：

import Router from 'vue-router';
Vue.use(Router);
export default new Router({
        'routes':
        [{
            'path':
            '/r',
            'name': 'r',
            'component': reportList
        }]
    })

這種方式的問題，在于導(dǎo)出后一旦掛載到Vue實(shí)例上，就不能修改router的內(nèi)容。沒有沒有找到官方的實(shí)例說明，但是想要通過以下方式清空路由都會被拒絕。

//不可行
app.router.history = []
app.router = new Router()

解決辦法

直到我在vue-router的github issues看到了這個(gè)回答，才解決了Vue應(yīng)用清空瀏覽歷史記錄的問題。

image.png

原文的代碼我粘貼如下：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const createRouter = () => new Router({
  mode: 'history',
  routes: []
})

const router = createRouter()

export function resetRouter () {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // the relevant part
}

export default router

在需要清空的歷史記錄的地方執(zhí)行以下就可以了。

import {resetRouter} from './router';
resetRouter() //執(zhí)行方法

網(wǎng)上流傳了很多清空記錄的方法，都不徹底，甚至絕大部分都無法實(shí)現(xiàn)清空的功能！這個(gè)回答是唯一能解決我的問題的回答。

場景二：描述

移動端開發(fā)經(jīng)常會遇到一個(gè)問題，就是頁面A->B ，B->C ，C->A首頁后，如果用戶點(diǎn)擊返回鍵，還是會回到C，但是C頁面往往是表單一類的操作或者帶有頁面參數(shù)，這時(shí)返回C頁面一容易報(bào)錯二特別影響使用效果，查了好多文章解決辦法都不如意，history也沒有直接清空路由棧的方法，所以只能手動清空路由棧，代碼如下：

let backlen=history.length-1;
history.go(-backlen);

這段代碼大家都可以看懂，其實(shí)所謂的跳到A頁面其實(shí)是回退到A頁面，將history中的路由?；赝说簦唵芜€不容易出錯，backlen的數(shù)值大家可以根據(jù)自己的需求減幾。