vue-cli腳手架使用element-ui(餓了嗎)插件的導航菜單沒法實現路由跳轉

使用餓了嗎ui組件的導航菜單,在加上router屬性以後沒法實現index的路由跳轉,點擊無效且不報錯

通過排查發現問題出如今路由的配置上面vue

代碼以下:vue-router

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自帶的  # 號,使路徑更加簡潔,瀏覽器

但同時也加上了訪問錯誤地址時的自動跳轉代碼ui

// {path:'*',redirect:'/index'},

這個時候就出現了bug

當點擊餓了嗎ui組件的導航菜單時,瀏覽器會尋找  /users 的地址,但在vue-router裏默認的地址應該是  ' / # / users ',因此瀏覽器會認爲沒有找到地址,將 / users 認爲是錯誤地址自帶跳轉到spa

/ index 的首頁面,在視覺上至關於沒有進行跳轉,實際上該頁面進行了兩次跳轉,第一次跳  / users 發現沒找到 ,第二次 跳回 ' /index ' 的默認地址code

形成了該bug的出現,該bug沒有任何報錯提示,屬於一種邏輯上的錯誤。component

相關文章
相關標籤/搜索