Problème concernant la route par défaut qui ne se charge pas dans vue.js

Cet article vous présente principalement la solution au problème de la route par défaut de vue.js qui ne charge pas linkActiveClass. L'article le présente en détail à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de tous les amis qui en ont besoin. Jetons un coup d'œil ensemble ci-dessous.

Problème trouvé

Lorsque j'ai ouvert le projet récemment, j'ai constaté que mon itinéraire par défaut ne chargeait pas linkActiveClass,

Après une recherche en ligne, j'ai constaté que de nombreux étudiants ont également ce problème. Après avoir vérifié certaines informations, j'ai découvert qu'il s'agissait d'un problème de redirection. Le document du site officiel dit ceci
https://. router.vuejs.org/ zh-cn/essentials/redirect-and-alias.html

Redirection

La redirection se fait également via des routes configuration, comme le montre l'exemple suivant. Est-ce une redirection de /a vers /b :

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

La cible de la redirection peut également être une route nommée :

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

ou même une méthode qui renvoie dynamiquement la cible de redirection :

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

Mon code était à l'origine comme ceci :

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

De cette façon, bien que le la sous-route est chargée, sa valeur par défaut La classe n'a pas suivi, puis a ajouté une redirection : '/user', et l'a modifiée pour ressembler à ceci

Après modification :

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

Cela résout parfaitement le problème du fait que la classe de routage par défaut n'est pas chargée.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment implémenter la barre de navigation à l'aide de vue

Comment utiliser les éléments iframe dans les composants vue

Comment charger les composants webpack require.ensure dans vue

Comment implémenter la réponse de formulaire dans Angular4

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!