History mode of vue project
This time I will bring you the History mode of the vue project. What are the precautions when operating the History mode of the vue project. The following is a practical case, let's take a look.
But it is not difficult to find that the appearance of # is really ugly, and I don’t know what it does?
So I went to Stack Overflow to search, and sure enough~ It seems that Stack Overflow is really powerful. The problems you encounter in the project have actually been asked and solved on so.
This is the answer with the highest votes, which is to set the mode to history in vue2. After trying it, it really works!
But knowing that this will solve the problem, but not knowing why, it doesn't work. With the connection, we saw the documentation.
Therefore, this article extends to the understanding of the document. You can go to the document directly.
For single-page applications developed by vue, when we switch between different pages, we can find that there is always only one html. This is really the reason why it is called a single page, and vue-router Default hash mode - uses the hash of the URL to simulate a complete URL, so when the URL The page will not reload when changed. Because for a normal page, changing the URL will definitely lead to a change of the page. The page will not be reloaded until the query string and hash value in the URL are replaced. This is the truth here.
But #this form is really ugly! So, if you don’t want it, you can use the routing history mode! ! ! This mode makes full use of the history.pushState API to complete URL jumps without reloading the page.
const router = new VueRouter({
mode: 'history',
routes: [...]
})After using this mode, there is no #, but you can access it like a normal URL.
However, to play well in this mode, you need background configuration support. Because our application is a single-page client application, if the background is not configured correctly, when the user directly accesses http://oursite.com/user/id in the browser, 404 will be returned, which is not good-looking.
Therefore, you need to add a candidate resource on the server side that covers all situations: if the URL does not match any static resource, it should return the same index.html page, which is the page your app depends on. .
Note: The backend of the project I am currently working on does not support this method, so I will use the # method for development first.
warn
A word of warning, because after doing this, your server will no longer return a 404 error page, because the index.html file will be returned for all paths. To avoid this, you should cover all routing situations in your Vue application and then present a 404 page.
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent }
]
})Or, if you are using Node.js as the backend, you can use server-side routing to match the URL, and return 404 when no route is matched, thereby implementing fallback.
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:
The above is the detailed content of History mode of vue project. 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
What does WeChat's Do Not Disturb mode do?
Feb 23, 2024 pm 10:48 PM
What does WeChat Do Not Disturb mode mean? Nowadays, with the popularity of smartphones and the rapid development of mobile Internet, social media platforms have become an indispensable part of people's daily lives. WeChat is one of the most popular social media platforms in China, and almost everyone has a WeChat account. We can communicate with friends, family, and colleagues in real time through WeChat, share moments in our lives, and understand each other’s current situation. However, in this era, we are also inevitably faced with the problems of information overload and privacy leakage, especially for those who need to focus or
What is sleep mode used for on iPhone?
Nov 04, 2023 am 11:13 AM
iOS devices have long been able to track your sleep patterns and more using the Health app. But isn’t it annoying when you’re disturbed by notifications while you’re sleeping? These notifications may be irrelevant and therefore disrupt your sleep patterns in the process. While Do Not Disturb mode is a great way to avoid distractions while sleeping, it can cause you to miss important calls and messages you receive during the night. Thankfully, this is where sleep mode comes in. Let’s learn more about it and how to use it on iPhone. What role does sleep mode play on the iPhone? Sleep mode is a dedicated focus mode in iOS that is automatically activated based on your sleep schedule in the "Health" App. It helps you set an alarm and then
Do Not Disturb Mode Not Working in iPhone: Fix
Apr 24, 2024 pm 04:50 PM
Even answering calls in Do Not Disturb mode can be a very annoying experience. As the name suggests, Do Not Disturb mode turns off all incoming call notifications and alerts from emails, messages, etc. You can follow these solution sets to fix it. Fix 1 – Enable Focus Mode Enable focus mode on your phone. Step 1 – Swipe down from the top to access Control Center. Step 2 – Next, enable “Focus Mode” on your phone. Focus Mode enables Do Not Disturb mode on your phone. It won't cause any incoming call alerts to appear on your phone. Fix 2 – Change Focus Mode Settings If there are some issues in the focus mode settings, you should fix them. Step 1 – Open your iPhone settings window. Step 2 – Next, turn on the Focus mode settings
What does epc+o mode mean?
Nov 09, 2022 am 10:54 AM
The epc+o model refers to the general contracting framework that integrates design, procurement, etc. It is some operational links derived from epc; that is, during the construction period, the general contractor must not only undertake design tasks in the traditional sense In addition, it also has to undertake all maintenance tasks during the operation period. This model can greatly improve the operational efficiency of many projects and quickly reduce operating costs.
iPhone 15 Pro: How to get rid of the silent mode symbol in the status bar
Sep 24, 2023 pm 10:01 PM
On iPhone 15 Pro and iPhone 15 Pro Max models, Apple introduced a physically programmable action button that replaces the traditional ring/silent switch above the volume buttons. The action button can be programmed to perform several different functions, but the ability to switch between silent and ring modes isn't gone. By default, a long press on the action button will silence the device and the button's tactile feedback will pulse three times. Both iPhone 15 Pro models will display a crossed-out bell symbol next to the time in the status bar to indicate that silent/silent mode is activated, and it will remain so until you long-press the Action button again to unmute the device. If you prefer to put your iPhone in silent mode
How to enable 'Notepad++ Dark Mode' and 'Notepad++ Dark Theme'?
Oct 27, 2023 pm 11:17 PM
Notepad++ dark mode v8.0 has no parameters, Notepad++ is the most useful text editor. Every app running on Windows 10 supports dark mode. You can name web browsers such as Chrome, Firefox, and Microsoft Edge. If you work on Notepad++, the default white background may hurt your eyes. Developers have added dark mode to version 8 of Notepad++, here's how to turn it on. Enable Notepad for Windows 11/10 ++ Dark Mode Launch Notepad ++ Click "Settings" > "Preferences" > "Dark Mode" Select "Enable Dark Mode" to restart Notepad
Guide to using standby mode in iOS 17
Aug 22, 2023 pm 04:01 PM
Standby mode is coming to iPhone with iOS17, and this guide aims to show you how to use this feature on your iPhone. Standby Mode is a breakthrough feature that transforms iPhone into a dynamic, always-on smart display. When your iPhone is laid horizontally on its side during charging, it activates standby mode. This mode beautifully showcases a host of useful widgets, including but not limited to the current time, local weather updates, a slideshow of your favorite photos, and even music playback controls. A significant advantage of this mode is its ability to display notifications, allowing users to view and engage with them without having to fully wake up their iPhone. How to Use Standby Mode For Standby Mode to work properly, your iPhone must be running i
How to leave S mode on Windows 10/11
Aug 03, 2023 pm 08:17 PM
Windows in S mode is designed to provide enhanced security and performance by only allowing the installation of apps from the Microsoft Store. While this feature helps prevent malware and ensure a secure computing environment, it may limit users who want to install applications from sources other than the Microsoft Store. If you find yourself in this situation and keep asking yourself how to switch out of S mode in Windows 10/11, then you have come to the right place as we will walk you through how to switch out in Windows 10/11 using two different methods Steps to S Mode ensure you can enjoy the freedom of installing apps from anywhere you choose. Learn how to switch out of S mode in Windows
