碼迷,mamicode.com
首頁 > 其他好文 > 詳細

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

時間:2019-08-15 17:28:18      閱讀:40      評論:0      收藏:0      [點我收藏+]

標簽:自動   邏輯   code   路徑   str   out   屬性   應該   route   

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

 

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

標簽:自動   邏輯   code   路徑   str   out   屬性   應該   route   

原文地址:https://www.cnblogs.com/BR-Tao/p/11359148.html

(0)
(0)
   
舉報
評論 一句話評論(0
登錄后才能評論!
? 2014 mamicode.com 版權所有 京ICP備13008772號-2
迷上了代碼!
河北十一选五基本走势