總結Vue路由跳轉問題的實例教程
來源:懂視網
責編:小OO
時間:2020-11-27 20:21:35
總結Vue路由跳轉問題的實例教程
最近項目上需要用Vue用來做app,在Vue中使用路由時遇到下面的問題。路由設置如下:其中/tab是根地址,有3個子地址,3個子地址層級為:LayoutList =>;LayoutView =>;LayoutDetail。正常情況:假設當前路由為/tab/layoutList,需要跳轉到LayoutView頁面,可以通過router.push({path:';layoutView/';+item.id})。跳轉后的路由為/tab/layoutView/1。當我想從LayoutView頁面跳轉到對應的LayoutDetail頁面時。情況一:(找不到頁面)。跳轉前地址:/tab/layoutView/1。
導讀最近項目上需要用Vue用來做app,在Vue中使用路由時遇到下面的問題。路由設置如下:其中/tab是根地址,有3個子地址,3個子地址層級為:LayoutList =>;LayoutView =>;LayoutDetail。正常情況:假設當前路由為/tab/layoutList,需要跳轉到LayoutView頁面,可以通過router.push({path:';layoutView/';+item.id})。跳轉后的路由為/tab/layoutView/1。當我想從LayoutView頁面跳轉到對應的LayoutDetail頁面時。情況一:(找不到頁面)。跳轉前地址:/tab/layoutView/1。
本篇文章主要介紹了Vue路由跳轉問題記錄詳解,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
最近項目上需要用Vue用來做app,在Vue中使用路由時遇到下面的問題。
路由設置如下:
其中/tab是根地址,有3個子地址,3個子地址層級為:LayoutList => LayoutView => LayoutDetail
正常情況:假設當前路由為/tab/layoutList,需要跳轉到LayoutView頁面,可以通過router.push({path:'layoutView/'+item.id})
跳轉后的路由為/tab/layoutView/1
當我想從LayoutView頁面跳轉到對應的LayoutDetail頁面時:
情況一:(找不到頁面)
跳轉前地址:/tab/layoutView/1
跳轉代碼:router.push({path:'layoutDetail/'+item.id});
跳轉后地址:/tab/layoutView/layoutDetail/27
情況二:(找不到頁面)
跳轉前地址:/tab/layoutView/1
跳轉代碼:router.push({path:'/layoutDetail/'+item.id});
跳轉后地址:/layoutDetail/27
情況三:(找不到頁面)
跳轉前地址:/tab/layoutView/1
跳轉代碼:router.push({path:'tab/layoutDetail/'+item.id});
跳轉后地址:/tab/layoutView/tab/layoutDetail/27
情況四:(頁面正常顯示)
跳轉前地址:/tab/layoutView/1
跳轉代碼:router.push({path:'/tab/layoutDetail/'+item.id});
跳轉后地址:/tab/layoutDetail/27
只有按照情況四的操作,才能正常顯示出來頁面。
vue路由會根據push的地址,如果地址不是/開頭,會直接替換當前路由的最后一個/后的地址,
如果地址是/開頭,會以push的地址作為絕對地址進行跳轉。
另外我嘗試還使用router.go({name:'LayoutDetail',params:{viewId:item.id}}),頁面不會跳轉且地址也不會改變。
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
總結Vue路由跳轉問題的實例教程
最近項目上需要用Vue用來做app,在Vue中使用路由時遇到下面的問題。路由設置如下:其中/tab是根地址,有3個子地址,3個子地址層級為:LayoutList =>;LayoutView =>;LayoutDetail。正常情況:假設當前路由為/tab/layoutList,需要跳轉到LayoutView頁面,可以通過router.push({path:';layoutView/';+item.id})。跳轉后的路由為/tab/layoutView/1。當我想從LayoutView頁面跳轉到對應的LayoutDetail頁面時。情況一:(找不到頁面)。跳轉前地址:/tab/layoutView/1。