How to globally configure the 404 page for Vue applications

This time I will show you how to apply global configuration to Vue 404 page, what are the precautions for applying global configuration to Vue 404 page, the following is a practical case, let’s take a look take a look.

After the front-end and back-end are separated, the responsibility for controlling route jumps is transferred to the front-end. The back-end is only responsible for returning an html document to the front-end and providing various interfaces. The two projects we use as examples below both use Vue as the basic framework. One is a SPA application and the other is a multi-page application, both of which are routed, controlled and rendered by the front end.

General idea

Whether it is a single page or multiple pages, my implementation idea is to configure the overall 404 page in the front-end routing table Add a route with path: '/404' and render the corresponding 404 page. At the same time, configure a rule to automatically redirect to the 404 page when all routes in the user-accessible routing table cannot be matched. Let's talk about my different implementation methods for single page and multiple pages.

SPA’s 404 routing configuration

The single-page application configuration 404 page also distinguishes two situations:

Situation of fixed routing table

If the routing table of SPA is fixed, then configuring the 404 page becomes very simple. You only need to add a route with a path of 404 in the routing table, and configure a route with a path of * at the bottom of the routing table to redirect to the 404 route.

(Since the routing table is matched from top to bottom, any matching rule must be placed at the bottom, otherwise all routes under this routing rule will jump to 404 and cannot be matched correctly.)

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

The routing table is dynamically generated

The routing table is dynamically generated, that is to say, the routing table is divided into two parts, one part is The basic routing table, and the other part is the routing table that needs to be dynamically generated based on the user's permission information.

In this project, the dynamically generated routes use the addRoutes method that comes with vue-router. This method injects new routing rules at the end of the original routing table array. Since any matching rule that redirects to the 404 page must be at the bottom of the routing table, here I extract the rule that redirects to the 404 page, and after injecting the dynamic route, inject the redirect rule to ensure that the rule is at the bottom of the routing table. Bottom of the table.

// 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)
 })

404 routing configuration for multi-page applications

The difference between multi-page applications and SPA is that each page has its own set routing, and each page may have its own set of 404 page styles, or it may not. At this time, the method of dynamically adding routing rules can no longer be used.

The solution I adopted is to judge the routing matching situation in the global Navigationguard beforeEach. At this time, you need to use the matched array in the vue navigation guard. If there is no match, then redirect to the 404 page. Of course, this 404 page is also set as a separate page.

// 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)
 })

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use mpvue to build a small program

How to build an mpvue small program project

The above is the detailed content of How to globally configure the 404 page for Vue applications. For more information, please follow other related articles on the PHP Chinese website!