使用餓了嗎ui組件的導航菜單,在加上router屬性之后無法實現index的路由跳轉,點擊無效且不報錯
經過排查發現問題出現在路由的配置上面
代碼如下:
const router = new vueRouter({ mode:"history", routes:[ {path:'/index',component:Index,children:[ {path:'/users',component:Users}, ]}, {path:'/login',component:Login}, // {path:'*',redirect:'/index'}, ] })
在路由規則里面使用了mode:"history",的屬性,為了去掉vue-router自帶的 # 號,使路徑更加簡潔,
但同時也加上了訪問錯誤地址時的自動跳轉代碼
// {path:'*',redirect:'/index'},
這個時候就出現了bug
當點擊餓了嗎ui組件的導航菜單時,瀏覽器會尋找 /users 的地址,但在vue-router里默認的地址應該是 ' / # / users ',所以瀏覽器會認為沒有找到地址,將 / users 認為是錯誤地址自帶跳轉到
/ index 的首頁面,在視覺上相當於沒有進行跳轉,實際上該頁面進行了兩次跳轉,第一次跳 / users 發現沒找到 ,第二次 跳回 ' /index ' 的默認地址
造成了該bug的出現,該bug沒有任何報錯提示,屬於一種邏輯上的錯誤。