Vue 解決父組件跳轉(zhuǎn)子路由后當(dāng)前導(dǎo)航active樣式消失問(wèn)題
舉個(gè)栗子，導(dǎo)航欄如下圖，當(dāng)前新聞資訊的路由是：localhost:8083/#/new，導(dǎo)航欄樣式如圖所示：
隨便挑個(gè)新聞點(diǎn)擊后會(huì)跳轉(zhuǎn)到子路由：localhost:8083/#/new/newDetail，這時(shí)候新聞資訊的主路由style樣式出現(xiàn)消失的問(wèn)題，如下圖：
style代碼：
.router-link-exact-active{
color: #8fc526!important;
border-top: 4px solid #8fc526!important;
}
router.js代碼：
{
path: '/new',
name: 'new',
component: news,
children: [
{
path: '/new/newDetail',
name: 'newDetail',
component: newsDetail
}
]
}
解決方案：
將style方案改成下面即可
.router-link-active{
color: #8fc526!important;
border-top: 4px solid #8fc526!important;
}
類(lèi)名設(shè)置為router-link-active，即使是跳轉(zhuǎn)到子路由也不會(huì)影響到主路由的樣式問(wèn)題
補(bǔ)充知識(shí)：解決element-ui中el-menu組件作為vue-router模式在刷新頁(yè)面后default-active屬性與當(dāng)前路由頁(yè)面不一致問(wèn)題的方法
解決辦法是給menu的default-active綁定route.path
形如：
<el-menu :default-active="$route.path" ...>
每次渲染menu都會(huì)讀當(dāng)前path 設(shè)置為default-active
以上這篇Vue 解決父組件跳轉(zhuǎn)子路由后當(dāng)前導(dǎo)航active樣式消失問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- 解決Vue路由導(dǎo)航報(bào)錯(cuò):NavigationDuplicated:?Avoided?redundant?navigation?to?current?location
- vue3容器布局和導(dǎo)航路由實(shí)現(xiàn)示例
- vue如何根據(jù)權(quán)限生成動(dòng)態(tài)路由、導(dǎo)航欄
- ant design vue導(dǎo)航菜單與路由配置操作
- 在vue中實(shí)現(xiàn)某一些路由頁(yè)面隱藏導(dǎo)航欄的功能操作
- vue 導(dǎo)航菜單刷新?tīng)顟B(tài)不消失,顯示對(duì)應(yīng)的路由界面操作
- Vue?3?中使用?vue-router?進(jìn)行導(dǎo)航與監(jiān)聽(tīng)路由變化的操作
相關(guān)文章
vue.js開(kāi)發(fā)實(shí)現(xiàn)全局調(diào)用的MessageBox組件實(shí)例代碼
最近學(xué)習(xí)了Vue.js，感覺(jué)組件這個(gè)地方知識(shí)點(diǎn)挺多的，而且很重要，所以決定記錄下，下面這篇文章主要給大家介紹了關(guān)于利用vue.js開(kāi)發(fā)實(shí)現(xiàn)全局調(diào)用的MessageBox組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-11-11
vue使用數(shù)組splice方法失效,且總刪除最后一項(xiàng)的問(wèn)題及解決
這篇文章主要介紹了vue使用數(shù)組splice方法失效,且總刪除最后一項(xiàng)的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Element-UI清空表單及驗(yàn)證不生效的問(wèn)題解決
本文主要介紹了Element-UI清空表單及驗(yàn)證不生效的問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
Vue-drag-resize 拖拽縮放插件的使用(簡(jiǎn)單示例)
本文通過(guò)代碼給大家介紹了Vue-drag-resize 拖拽縮放插件使用簡(jiǎn)單示例,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
vue使用element-ui的el-date-picker設(shè)置樣式無(wú)效的解決
本文主要介紹了vue使用element-ui的el-date-picker設(shè)置樣式無(wú)效的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
vue自定義switch開(kāi)關(guān)組件,實(shí)現(xiàn)樣式可自行更改
今天小編就為大家分享一篇vue自定義switch開(kāi)關(guān)組件,實(shí)現(xiàn)樣式可自行更改，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue監(jiān)聽(tīng)input標(biāo)簽的value值方法
今天小編就為大家分享一篇vue監(jiān)聽(tīng)input標(biāo)簽的value值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue el-table實(shí)現(xiàn)多選框回填的示例代碼
摘要：Vue多選框回填是實(shí)現(xiàn)表單數(shù)據(jù)高效處理的常見(jiàn)需求,本文主要介紹了vue el-table實(shí)現(xiàn)多選框回填的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
這篇文章主要介紹了使用Vue?3和Element-plus搭建前端項(xiàng)目的過(guò)程,包括項(xiàng)目搭建、Element-plus安裝和引入、axios安裝、sass使用、app.vue配置、組件創(chuàng)新、路由配置以及使用輔助插件來(lái)提高開(kāi)發(fā)效率,需要的朋友可以參考下2025-02-02
混入(mixin)是一種非常靈活的方式,用來(lái)分發(fā)Vue組件中可復(fù)用的功能,一個(gè)混入對(duì)象可以包含任意組件選項(xiàng),下面這篇文章主要給大家介紹了關(guān)于Vue混入和繼承的相關(guān)資料,需要的朋友可以參考下2021-09-09