Vue 解決父組件跳轉(zhuǎn)子路由后當前導航active樣式消失問題
更新時間：2020年07月21日 09:17:56 作者：昔有木如蓋
這篇文章主要介紹了Vue 解決父組件跳轉(zhuǎn)子路由后當前導航active樣式消失問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
舉個栗子，導航欄如下圖，當前新聞資訊的路由是：localhost:8083/#/new，導航欄樣式如圖所示：
隨便挑個新聞點擊后會跳轉(zhuǎn)到子路由：localhost:8083/#/new/newDetail，這時候新聞資訊的主路由style樣式出現(xià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;
}
類名設置為router-link-active，即使是跳轉(zhuǎn)到子路由也不會影響到主路由的樣式問題
補充知識：解決element-ui中el-menu組件作為vue-router模式在刷新頁面后default-active屬性與當前路由頁面不一致問題的方法
解決辦法是給menu的default-active綁定route.path
形如：
<el-menu :default-active="$route.path" ...>
每次渲染menu都會讀當前path 設置為default-active
以上這篇Vue 解決父組件跳轉(zhuǎn)子路由后當前導航active樣式消失問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于Vue2x實現(xiàn)響應式自適應輪播組件插件VueSliderShow功能
本文講述的是從開發(fā)一款基于Vue2x的響應式自適應輪播組件插件的一個全過程，包含發(fā)布到npm，構(gòu)建自己的npm包，供下載安裝使用的技巧,非常不錯，具有一定的參考借鑒價值，感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05
Vue-cli項目獲取本地json文件數(shù)據(jù)的實例
下面小編就為大家分享一篇Vue-cli項目獲取本地json文件數(shù)據(jù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue項目中在外部js文件中直接調(diào)用vue實例的方法比如說this
這篇文章主要介紹了vue項目中在外部js文件中直接調(diào)用vue實例的方法比如說this,需要的朋友可以參考下2019-04-04
詳解Vue中數(shù)據(jù)可視化詞云展示與詞云的生成
數(shù)據(jù)可視化是現(xiàn)代Web應用程序中的一個重要組成部分，詞云是一種非常流行的數(shù)據(jù)可視化形式，可以用來展示文本數(shù)據(jù)中的主題和關(guān)鍵字，本文我們將介紹如何在Vue中使用詞云庫進行數(shù)據(jù)可視化詞云展示和詞云生成，需要的可以參考一下2023-06-06
這篇文章主要介紹了vue實現(xiàn)將時間戳轉(zhuǎn)換成日期格式方式,具有很好的參考價值,希望對大家有所幫助,2023-10-10
這篇文章主要介紹了詳解如何用VUE寫一個多用模態(tài)框組件模版，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了vue組件間傳值的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要介紹了詳解Axios統(tǒng)一錯誤處理與后置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue+iview?Table表格多選切換分頁保持勾選狀態(tài)
這篇文章主要為大家詳細介紹了vue+iview?Table表格多選切換分頁保持勾選狀態(tài)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
今天小編就為大家分享一篇基于vue中對鼠標劃過事件的處理方式詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08