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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to set up Git configuration in PyCharm
Feb 20, 2024 am 09:47 AM
Title: How to correctly configure Git in PyCharm In modern software development, the version control system is a very important tool, and Git, as one of the popular version control systems, provides developers with powerful functions and flexible operations. As a powerful Python integrated development environment, PyCharm comes with support for Git, allowing developers to manage code versions more conveniently. This article will introduce how to correctly configure Git in PyCharm to facilitate better development during the development process.
The working principle and configuration method of GDM in Linux system
Mar 01, 2024 pm 06:36 PM
Title: The working principle and configuration method of GDM in Linux systems In Linux operating systems, GDM (GNOMEDisplayManager) is a common display manager used to control graphical user interface (GUI) login and user session management. This article will introduce the working principle and configuration method of GDM, as well as provide specific code examples. 1. Working principle of GDM GDM is the display manager in the GNOME desktop environment. It is responsible for starting the X server and providing the login interface. The user enters
The perfect combination of PyCharm and PyTorch: detailed installation and configuration steps
Feb 21, 2024 pm 12:00 PM
PyCharm is a powerful integrated development environment (IDE), and PyTorch is a popular open source framework in the field of deep learning. In the field of machine learning and deep learning, using PyCharm and PyTorch for development can greatly improve development efficiency and code quality. This article will introduce in detail how to install and configure PyTorch in PyCharm, and attach specific code examples to help readers better utilize the powerful functions of these two. Step 1: Install PyCharm and Python
Understand Linux Bashrc: functions, configuration and usage
Mar 20, 2024 pm 03:30 PM
Understanding Linux Bashrc: Function, Configuration and Usage In Linux systems, Bashrc (BourneAgainShellruncommands) is a very important configuration file, which contains various commands and settings that are automatically run when the system starts. The Bashrc file is usually located in the user's home directory and is a hidden file. Its function is to customize the Bashshell environment for the user. 1. Bashrc function setting environment
How to configure workgroup in win11 system
Feb 22, 2024 pm 09:50 PM
How to configure a workgroup in Win11 A workgroup is a way to connect multiple computers in a local area network, which allows files, printers, and other resources to be shared between computers. In Win11 system, configuring a workgroup is very simple, just follow the steps below. Step 1: Open the "Settings" application. First, click the "Start" button of the Win11 system, and then select the "Settings" application in the pop-up menu. You can also use the shortcut "Win+I" to open "Settings". Step 2: Select "System" In the Settings app, you will see multiple options. Please click the "System" option to enter the system settings page. Step 3: Select "About" In the "System" settings page, you will see multiple sub-options. Please click
Simple and easy-to-understand PyCharm configuration Git tutorial
Feb 20, 2024 am 08:28 AM
PyCharm is a commonly used integrated development environment (IDE). In daily development, using Git to manage code is essential. This article will introduce how to configure Git in PyCharm and use Git for code management, with specific code examples. Step 1: Install Git First, make sure Git is installed on your computer. If it is not installed, you can go to [Git official website](https://git-scm.com/) to download and install the latest version of Git
How to configure and install FTPS in Linux system
Mar 20, 2024 pm 02:03 PM
Title: How to configure and install FTPS in Linux system, specific code examples are required. In Linux system, FTPS is a secure file transfer protocol. Compared with FTP, FTPS encrypts the transmitted data through TLS/SSL protocol, which improves Security of data transmission. In this article, we will introduce how to configure and install FTPS in a Linux system and provide specific code examples. Step 1: Install vsftpd Open the terminal and enter the following command to install vsftpd: sudo
How to install and configure DRBD on CentOS7 system? Tutorial on implementing high availability and data redundancy!
Feb 22, 2024 pm 02:13 PM
DRBD (DistributedReplicatedBlockDevice) is an open source solution for achieving data redundancy and high availability. Here is the tutorial to install and configure DRBD on CentOS7 system: Install DRBD: Open a terminal and log in to the CentOS7 system as administrator. Run the following command to install the DRBD package: sudoyuminstalldrbd Configure DRBD: Edit the DRBD configuration file (usually located in the /etc/drbd.d directory) to configure the settings for DRBD resources. For example, you can define the IP addresses, ports, and devices of the primary node and backup node. Make sure there is a network connection between the primary node and the backup node.
