vue.js默認(rèn)路由不加載linkActiveClass問題的解決方法
發(fā)現(xiàn)問題
最近在打開項(xiàng)目的時(shí)候，發(fā)現(xiàn)我的默認(rèn)路由沒加載上linkActiveClass，
網(wǎng)上一搜，發(fā)現(xiàn)很多同學(xué)也有這個(gè)問題，查了一些資料發(fā)現(xiàn)這是個(gè)重定向的問題，官網(wǎng)文檔是這么寫的
https://router.vuejs.org/zh-cn/essentials/redirect-and-alias.html
重定向
重定向也是通過 routes 配置來完成，下面例子是從 /a 重定向到 /b：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
重定向的目標(biāo)也可以是一個(gè)命名的路由：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
甚至是一個(gè)方法，動(dòng)態(tài)返回重定向目標(biāo)：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目標(biāo)路由 作為參數(shù)
// return 重定向的 字符串路徑/路徑對象
}}
]
})
我的代碼本來是這樣的：
const router=new VueRouter({
linkActiveClass:'list-active',
routes:[
{
path:'/',
component:user
},
{
path:'/user',
component:user
},
{
path:'/warship',
component:warship
}
]
})
這樣雖然加載了子路由，但是它的默認(rèn)類沒跟著過來，然后加了一句redirect:'/user',修改成了這樣
修改后：
const router=new VueRouter({
linkActiveClass:'list-active',
routes:[
{
path:'/',
redirect:'/user',
component:user
},
{
path:'/user',
component:user
},
{
path:'/warship',
component:warship
}
]
})
就完美解決了默認(rèn)路由class沒加載的問題。
這個(gè)重定向簡單來說就是自定義路由指針，就跟js里面修改了引用地址一個(gè)道理，雖然表面上看著是個(gè)根目錄，其實(shí)引用的是別的路由界面。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
vue3輸入單號和張數(shù)如何自動(dòng)生成連號的單號
最近遇到這樣的需求輸入連號事件,需要在表格中輸入物流單號,物流號碼,生成的數(shù)量,名稱,點(diǎn)擊確定自動(dòng)生成固定數(shù)量的連號物流單號,本文重點(diǎn)介紹vue3輸入單號和張數(shù),自動(dòng)生成連號的單號,感興趣的朋友一起看看吧2024-02-02
這篇文章主要介紹了element-ui查看大圖的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue之elementUi的el-select同時(shí)獲取value和label的三種方式
這篇文章主要介紹了vue之elementUi的el-select同時(shí)獲取value和label的三種方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
本文主要介紹了vite2.0 踩坑，記錄了一些在配置項(xiàng)目中遇到的問題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
Form組件提供了表單驗(yàn)證的功能,只需要通過屬性傳入約定的驗(yàn)證規(guī)則,并將Form-Item的屬性設(shè)置為需校驗(yàn)的字段名即可,下面這篇文章主要給大家介紹了關(guān)于Element中el-form表單的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue axios攔截器如何單獨(dú)配置token及vue axios攔截器的使用,需要的朋友可以參考下2019-12-12
vue excel上傳預(yù)覽和table內(nèi)容下載到excel文件中
這篇文章主要介紹了vue excel上傳預(yù)覽和table內(nèi)容下載到excel文件中,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
在Vue3中處理異步API調(diào)用并更新表單數(shù)據(jù)的方法示例
這篇文章主要介紹了如何在Vue3中處理異步API調(diào)用并更新表單數(shù)據(jù)（附Demo）,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-06-06
Vue清除定時(shí)器setInterval優(yōu)化方案分享
這篇文章主要介紹了Vue清除定時(shí)器setInterval優(yōu)化方案分享，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue+threejs寫物體動(dòng)畫之物體縮放動(dòng)畫效果
最近在vue中安裝Three.js,無聊順便研究一些關(guān)于3D圖形化庫,下面這篇文章主要給大家介紹了關(guān)于vue+threejs寫物體動(dòng)畫之物體縮放動(dòng)畫效果的相關(guān)資料,需要的朋友可以參考下2022-10-10