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è)方法，動態(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)文章
這篇文章主要介紹了vue打包添加gzip配置項(xiàng)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
.sync修飾符算是Vue的所有修飾符中較難理解的一個(gè)，本篇文章就帶你走近.sync的世界，深入理解后會發(fā)現(xiàn)，其實(shí)也就那么回事。修飾符和指令息息相關(guān)，下面從指令 ->修飾符->.sync修飾符由淺入深地來講解 .sync的含義及用法。2021-05-05
Vue.js實(shí)現(xiàn)對視頻預(yù)覽的示例代碼
本文主要介紹了Vue.js實(shí)現(xiàn)對視頻預(yù)覽的示例代碼,通過監(jiān)聽文件選擇事件和使用FileReader API,可以實(shí)現(xiàn)視頻文件的預(yù)覽功能,感興趣的可以了解一下2025-01-01
在vue項(xiàng)目實(shí)現(xiàn)一個(gè)ctrl+f的搜索功能
剛剛接到領(lǐng)導(dǎo)通知，需要實(shí)現(xiàn)搜索功能，因?yàn)轫?xiàng)目是vue的而且是手機(jī)端，對我來說有點(diǎn)小難度。經(jīng)過小編的一番思索最終還是解決了，今天小編把實(shí)現(xiàn)過程分享到腳本之家平臺，需要的朋友參考下2020-02-02
全局指令是Vue.js中的一種自定義指令,可以在整個(gè)應(yīng)用中重復(fù)使用,通過Vue.directive方法定義,可以在組件內(nèi)部直接使用,指令有多個(gè)生命周期鉤子,可以接收參數(shù)和修飾符,提高代碼復(fù)用性和可維護(hù)性,本文介紹vue全局指令文件directives,感興趣的朋友一起看看吧2025-02-02
vue中計(jì)算屬性computed和普通屬性method的區(qū)別小結(jié)
Vue.js中Computed和Methods是兩種常用的數(shù)據(jù)處理方式,本文主要介紹了vue中計(jì)算屬性computed和普通屬性method的區(qū)別小結(jié),具有一定的參考價(jià)值,感興趣的可以了解一下2024-06-06
這篇文章主要介紹了mpvue開發(fā)音頻類小程序踩坑和建議詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
詳解vue axios用post提交的數(shù)據(jù)格式
這篇文章主要介紹了詳解vue axios用post提交的數(shù)據(jù)格式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
本篇是我對vue使用過程中以及對一些社區(qū)朋友提問我的問題中做的一些總結(jié)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-02-02
本文將探討 Vue 事件處理中常見的上下文問題及其解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03