Comment configurer globalement la page 404 pour les applications Vue

Cette fois, je vais vous montrer comment configurer globalement la page 404 pour les applications Vue, et quelles sont les précautions pour la configuration globale des applications Vue pour les pages 404. Voici des exemples pratiques. cas. Jetons un coup d'oeil.

Une fois le front-end et le back-end séparés, la responsabilité du contrôle des sauts de routage est transférée au front-end. Le back-end est uniquement responsable du retour d'un document html. au front-end et fournissant diverses interfaces. Les deux projets que nous utilisons comme exemples ci-dessous utilisent tous deux Vue comme framework de base. L'un est une application SPA et l'autre est une application multipage, toutes deux routées, contrôlées et rendues par le front-end.

Idée générale

Qu'il s'agisse d'une seule page ou de plusieurs pages, mon idée de mise en œuvre est de configurer la page 404 globale au premier plan- fin de la table de routage Ajoutez une route avec le chemin : '/404' et affichez la page 404 correspondante. Dans le même temps, configurez une règle pour rediriger automatiquement vers la page 404 lorsque toutes les routes de la table de routage accessible à l'utilisateur ne peuvent pas correspondre. Parlons de mes différentes méthodes d'implémentation pour une seule page et plusieurs pages.

Configuration du routage 404 de SPA

La page 404 de configuration de l'application d'une seule page distingue également deux situations :

La situation de la table de routage fixe

Si la table de routage du SPA est fixe, alors la configuration de la page 404 devient très simple. Il vous suffit d'ajouter une route avec un chemin de 404 dans la table de routage et de configurer une route avec un chemin de * en bas de la table de routage pour rediriger vers la route 404.

(Étant donné que la table de routage correspond de haut en bas, toute règle de correspondance doit être placée en bas, sinon toutes les routes sous cette règle de routage passeront à 404 et ne pourront pas être mises en correspondance correctement.)

// router.js
export default new Router({
 mode: 'history',
 routes: [
 // ...
 {
 name: '404',
 path: '/404',
 component: () => import('@/views/notFound.vue')
 },
 {
 path: '*', // 此处需特别注意至于最底部
 redirect: '/404'
 }
 ],
})

Lorsque la table de routage est générée dynamiquement

Lorsque la table de routage est générée dynamiquement, c'est-à-dire que la table de routage est divisée en deux Une partie est la table de routage de base et l'autre partie est la table de routage qui doit être générée dynamiquement en fonction des informations d'autorisation de l'utilisateur.

Dans ce projet, la génération dynamique des routes utilise la méthode addRoutes fournie avec vue-router. Cette méthode injecte de nouvelles règles de routage à la fin du tableau de table de routage d'origine. Puisque toute règle correspondante qui redirige vers la page 404 doit être en bas de la table de routage, j'extrait ici la règle qui redirige vers la page 404, et après avoir injecté la route dynamique, j'injecte la règle de redirection pour m'assurer que la règle est à le bas de la table de routage.

// router.js
export default new Router({
 mode: 'history',
 routes: [
 // ...
 {
 name: '404',
 path: '/404',
 component: () => import('@/views/notFound.vue')
 },
 // ...other codes
 ],
})
// notFoundRouterMap.js
export default [
 {
 name: '404',
 path: '/404',
 component: () => import('@/views/notFound.vue')
 },
 },
 {
 path: '*',
 redirect: '/404'
 }
]
// main.js
//...other codes
router.beforeEach((to, from, next) => {
 new Promise((resolve, reject) => {
 if (getCookie(tokenName)) {
 if (!getInfo()) {
 Promise.all([store.dispatch('getBasicInfo'), store.dispatch('getUserDetail')]).then(res => {
 store.dispatch('GenerateRoutes', { roles }).then(() => { 
 // 根据用户权限生成可访问的路由表
 router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
 router.addRoutes(NotFoundRouterMap) // 添加404及重定向路由规则
 resolve({ ...to, replace: true }) // 重新加载一次路由，让路由表更新成功后走下面else的判断
 })
 
 })
 } else {
 // ...other codes
 }
 } else {
 window.location.href = '/login.html'
 }
 }).then(res => {
 if (res) {
 next(res)
 } else {
 next()
 }
 }).catch(err => {
 new Error(err)
 next(false)
 })

Configuration du routage 404 pour les applications multipages

La différence entre les applications multipages et SPA est que chaque page a son propre Un ensemble d'itinéraires, et chaque page peut avoir son propre ensemble de 404 styles de page, ou non. À l’heure actuelle, la méthode d’ajout dynamique de règles de routage ne peut plus être utilisée.

La solution que j'ai adoptée est de juger de la situation de correspondance de routage dans la garde globale Navigation avantEach. À ce stade, vous devez utiliser le tableau correspondant dans la garde de navigation vue. S'il n'y a pas de correspondance, redirigez vers la page 404. Bien entendu, cette page 404 est également définie comme une page distincte.

// permission.js
//...other codes
router.beforeEach((to, from, next) => {
 new Promise((resolve, reject) => {
 // ...other codes
 }).then(res => {
 if (!to.matched.length) {
 window.location = '/error.html#/404'
 return
 } 
 if (res) {
 next(res)
 } else {
 next()
 }
 }).catch(err => {
 new Error(err)
 next(false)
 })

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment créer un mini programme avec mpvue

Comment créer un projet de mini programme mpvue

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!