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