vue返回首頁后如何清空路由問題

更新時(shí)間：2023年06月05日 14:58:44 作者：ジ Jing

這篇文章主要介紹了vue返回首頁后如何清空路由問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue返回首頁后如何清空路由

需求一：從首頁點(diǎn)擊路由到A頁面

A頁面點(diǎn)擊路由到B頁面
B頁面點(diǎn)擊路由到C頁面
C頁面點(diǎn)擊路由鏈接到D頁面
D頁面有個(gè)返回首頁按鈕

那么問題來了

點(diǎn)擊返回首頁后，再點(diǎn)擊手機(jī)的返回鍵會(huì)打開D頁面再按手機(jī)返回鍵會(huì)打開C頁面，依次類推，

如何才能實(shí)現(xiàn)點(diǎn)擊返回首頁后，清空路由呢

mounted () {
    if (window.history && window.history.pushState) {
        // 向歷史記錄中插入了當(dāng)前頁
        history.pushState(null, null, document.URL);
        window.addEventListener('popstate', this.goBack, false);
    }
},
destroyed () {
    window.removeEventListener('popstate', this.goBack, false);
},
methods: {
    goBack () {
        // console.log("點(diǎn)擊了瀏覽器的返回按鈕");
        sessionStorage.clear();
        window.history.back();
    },
}

禁止有返回記錄

mounted () {
? ? if (window.history && window.history.pushState) {
? ? ? ? // 向歷史記錄中插入了當(dāng)前頁
? ? ? ? history.pushState(null, null, document.URL);
? ? ? ? window.addEventListener('popstate', this.goBack, false);
? ? }
},
destroyed () {
? ? window.removeEventListener('popstate', this.goBack, false);
},
methods: {
? ? goBack () {
? ? ? ? // console.log("點(diǎn)擊了瀏覽器的返回按鈕");
? ? ? ? history.pushState(null, null, document.URL);
? ? },
}?

需求二：把瀏覽器的記錄返回指定的頁面

mounted 中：
?if (window.history && window.history.pushState) {
? ? ? history.pushState(null, null, document.URL);
? ? ? window.addEventListener("popstate", _this.onClickLeft, false); ?//_this.onClickLeft是返回的點(diǎn)擊事件
? ? }

?methods: {
? ? onClickLeft() {
? ? // ? this.$route.query.radio支付頁面到指定頁面?zhèn)鞯膮?shù) 來判斷他的路由
? ? ? if (this.$route.query.radio == 1 || this.$route.query.radio == 2) {
? ? ? ? this.$router.push({ //返回指定頁面
? ? ? ? });
? ? ? } else {
? ? ? ? this.$router.go(-1); ?// 正常返回
? ? ? }
? ? },

// 將事件清除掉
?destroyed() {
? ? window.removeEventListener("popstate", this.onClickLeft, false);
? }

vue路由緩存的靈活清空

vue的路由緩存，靈活清空，在頁面離開時(shí)判斷

beforeRouteLeave:function(to, from, next){
    // 增加離開路由時(shí)清除keep-alive
    //rank寫在router.js的路由meta里面，用來判斷rank信息，可自由更改
    if (from && from.meta.rank && to.meta.rank && from.meta.rank == to.meta.rank)
    {//此處判斷是如果返回上一層，你可以根據(jù)自己的業(yè)務(wù)更改此處的判斷邏輯，酌情決定是否摧毀本層緩存。
        if (this.$vnode && this.$vnode.data.keepAlive)
        {
            if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache)
            {
                if (this.$vnode.componentOptions)
                {
                    var key = this.$vnode.key == null
                                ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
                                : this.$vnode.key;
                    var cache = this.$vnode.parent.componentInstance.cache;
                    var keys  = this.$vnode.parent.componentInstance.keys;
                    if (cache[key])
                    {
                        if (keys.length) {
                            var index = keys.indexOf(key);
                            if (index > -1) {
                                keys.splice(index, 1);
                            }
                        }
                        delete cache[key];
                    }
                }
            }
        }
        this.$destroy();
    }
    next();
},