How to solve the problem that the page cannot be rendered in Vue routing History mode

This article mainly introduces the detailed explanation of the reasons and solutions for the page failure to render in the History mode of Vue routing. It is of great practical value. Friends in need can refer to

Causes of routing in History mode under Vue Reasons why the page cannot be rendered

It is very simple to create a single-page application with Vue.js vue-router. Using Vue.js, we can already compose applications by combining components. When you want to add vue-router, what we need to do is to map the components to routes, and then tell vue-router in where to render them.

The URL of a generally developed single-page application will have a hash pattern with the # symbol, because the entire application itself has only one HTML, and the rest is rendered through the router. If it is due to business needs or simply feels that the # sign is unsightly, you can use the history mode. Simply put, add the following line of code to the router's configuration file How to solve the problem that the page cannot be rendered in Vue routing History mode:

history: mode

Yes, like this There will no longer be a # sign in the URL, and you will find that the entire address bar has returned to what you are familiar with. However, the next introduction is very important. Maybe many newcomers will encounter one or two pitfalls like this. …

The page cannot be rendered

Here is a project I wrote as an example. When I turned on the history mode, I did not do any processing on the routing. Everything is normal in the Dev stage, but after packaging, if you visit the project path:

sdp.driver.com/driver/

, you will find that the page is blank, but the static files can be referenced normally. , because the module in YII is used, so in addition to the domain name, it also contains the driver module name. Generally, the projects created by many people are placed under the root directory, that is, in a form such as

sdp.driver.com

, no problem. But if the module is configured or placed under a subfolder, problems will occur. In fact, this is because the router cannot find the components in the path, so it cannot be rendered. Just modify the How to solve the problem that the page cannot be rendered in Vue routing History mode in the router and add your project name to each path, and you will be successful.

The final page effect:

##404 error

at In History mode, if you access the path directly through the address bar, a 404 error will occur. This is because this is a single-page application (nonsense)... In fact, it is because the history.pushState API is called, so all operations such as jumps are It is implemented through the router. Solving this problem is very simple. You only need to configure in the background that if the URL does not match any static resources, it will jump to the default index.html. The specific configuration is as follows:

Apache

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.html [L]
</IfModule>

nginx

location / {
 try_files $uri $uri/ /index.html;}

Node.js (Express)

About each time The problem of refreshing the page every time you click on a link

As we all know, developing single-page applications is because of the silky smooth experience. If the page is refreshed every time you click...

The reason for this is because window.location is used to jump. You only need to use the method provided by the router to solve this problem:

Bind the router to the global configuration in main.js

Vue.prototype.router = router;

The following methods will be used to control jumps in the future

this.router.push('driver/service');

The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How VueJS components interact and verify through props

How to solve the problem of vuex in the parent component The method update state subcomponent cannot be updated and rendered in time

The above is the detailed content of How to solve the problem that the page cannot be rendered in Vue routing History mode. For more information, please follow other related articles on the PHP Chinese website!