在vue.js中有關預設路由不載入問題

這篇文章主要給大家介紹了關於vue.js預設路由不載入linkActiveClass問題的解決方法，文中透過範例程式碼介紹的非常詳細，對大家的學習或工作具有一定的參考學習價值，需要的朋友們下面來一起看看吧。

發現問題

最近在開啟專案的時候，發現我的預設路由沒有載入上linkActiveClass，

網路上一搜，發現很多同學也有這個問題，查了一些資料發現這是個重定向的問題，官網文檔是這麼寫的
https://router.vuejs.org/ zh-cn/essentials/redirect-and-alias.html

重定向

重定向也是透過routes 設定來完成，以下範例是從/a 重定向到/b：

const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})

重定向的目標也可以是一個命名的路由：

const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})

甚至是一個方法，動態返回重定向目標：

const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
})

我的程式碼本來是這樣的：

const router=new VueRouter({
linkActiveClass:'list-active',
routes:[
{
 path:'/',
 component:user
},
{
 path:'/user',
 component:user
},
{
 path:'/warship', 
 component:warship
}
]
})

這樣雖然載入了子路由，但是它的預設類別沒跟著過來，然後加了一句redirect:'/user',修改成了這樣

修改後：

const router=new VueRouter({
linkActiveClass:'list-active',
routes:[
{
 path:'/',
 redirect:'/user',
 component:user
},
{
 path:'/user',
 component:user
},
{
 path:'/warship', 
 component:warship
}
]
})

就完美解決了預設路由class沒載入的問題。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

使用vue如何實作nav導覽列

#在vue元件中如何使用iframe元素

在vue中如何載入元件webpack require.ensure

#在Angular4如何實作表單回應

#

以上是在vue.js中有關預設路由不載入問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！