鍍金池/ 問(wèn)答/HTML/ vue-router使用編程式導(dǎo)航時(shí)路由不穩(wěn)定的問(wèn)題

vue-router使用編程式導(dǎo)航時(shí)路由不穩(wěn)定的問(wèn)題

嘗試做一個(gè)SPA，使用Vue-router來(lái)做路由管理，
場(chǎng)景是這樣的：
4個(gè)TAB頁(yè)，tab由單獨(dú)抽成一個(gè)組件，import導(dǎo)入Vue根實(shí)例，router實(shí)例注入Vue根實(shí)例以便于在組件中操作。
相關(guān)代碼截圖如下：
index.html的html代碼，tab為4個(gè)TAB頁(yè)按鈕的組件
圖片描述

實(shí)例注入
圖片描述

路由配置，路由組件是異步加載的
圖片描述
圖片描述

tab組件，點(diǎn)擊時(shí)調(diào)用注入的router實(shí)例的replace方法，page為對(duì)應(yīng)的路由名稱
圖片描述
圖片描述

以上就是相應(yīng)的部分邏輯代碼，理論上，切換TAB頁(yè)URL的hash會(huì)改變也確實(shí)改變了，但是刷新頁(yè)面發(fā)現(xiàn)有時(shí)會(huì)導(dǎo)航到index有時(shí)會(huì)停留在當(dāng)前頁(yè)，這是什么原因呢。

回答
編輯回答
裸橙

為啥我感覺(jué)邏輯有點(diǎn)復(fù)雜呢。。。是不是我之前的寫(xiě)法有問(wèn)題。。。汗。
做spa，可以先確定哪些是固定的，例如你這個(gè)tab，有一些會(huì)有頭部什么的。把這些獨(dú)立為一個(gè)組件，在app.vue引入tab，此時(shí)<tab/>和<router-view/>是平級(jí)的，然后讓app這個(gè)頁(yè)面上下布局，即<tab/>固定在下面，然后上面的路由視圖一直變好了。

回到正題：沒(méi)有遇到你說(shuō)的問(wèn)題。。。

2017年2月25日 21:23
編輯回答
淚染裳

已發(fā)現(xiàn)問(wèn)題。應(yīng)該是chrome瀏覽器下的一些兼容問(wèn)題，在火狐和Edge下沒(méi)有問(wèn)題

2017年2月12日 07:46
編輯回答
青檸

樓主思路就錯(cuò)了，為何要主動(dòng) this.$router.replace(page)，應(yīng)該是官方推薦的編程式導(dǎo)航操作路由 編程式導(dǎo)航

2018年7月15日 22:34