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>
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...Vue.prototype.router = router;
this.router.push('driver/service');
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!