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


使用餓了嗎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沒有任何報錯提示,屬於一種邏輯上的錯誤。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM