How to deal with the problem that the rendered page is not reflected when Vue routing is refreshed in history mode

This time I will bring you vueroutingHow to handle the problem of rendering the page without reflection when refreshing in history mode, and how to handle the problem of rendering page without reflection when vue route is refreshed in history modeNotes What are the actual cases? Let’s take a look at them.

Solve the problem that vue-router nested routing (sub-routing) cannot render the page when refreshing in history mode. The specific content is as follows

1. Exception description

Originally, the hash mode of vue-router was used, but the URL in hash mode needs to have the "#" symbol, which not only looks uncomfortable, but also destroys the "#" in the routing in some scenarios (the WeChat sharing page will change " #"The following content is processed), so you need to use the history mode, and then let the backend change the nginx configuration:

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

vue-router uses history mode and uses nested routing:

const router = new Router({
 mode: 'history',
 routes: [
  {
   path: '/',
   component: mall,
   name: 'mall'
  },
  ……
  //我的银行卡
  {
   path: '/myCard',
   meta: { requireAuth: true },
   component: myCard,
   name: 'myCard',
   children:[
   { path:'', component: card},
   { path:'add', component: add}
   ]
  }
   ……
 ]
})

When accessing the routing and nested routing pages, the display is normal, but when refreshing the page, the nested routing page has an exception:

The page style is completely messed up. Take a look at the static files loaded by the page request. All static files are 404;

2. Exception analysis

1. Read the official documentation’s description of nested routing:

2. Looking at the previous exception page again, it seems that our parent route has become the root directory. Check the file path:

3. Take a look at the exception files we introduced. They are referenced directly in the index.html file, that is, they are introduced under the root path. In the previous hash mode, the root path will not change, so it is feasible for us to directly introduce these static files in the index.html file. However, after using the history mode, the root path is not fixed. Then this introduction method is not feasible, which is why the page above cannot be rendered:

3. Solve the problem

It’s a bit awkward here. I first considered introducing static style files in the main Vue by way of Import, which was indeed feasible. However, in the end I found that it was OK to directly modify the static file introduction path in the index.html file:

Before modification:

<script src="./static/js/stomp.js"></script>

After modification

<script src="/static/js/stomp.js"></script>

4. Principle

./ refers to the current directory where the user is located (relative path);

/ refers to the root directory (absolute path, project root directory), which is the project root directory;

For hash mode, the root path is fixed, which is the root directory of the project. However, in history mode, nested paths starting with / will be regarded as the root path, so use "./" to introduce files. The file will not be found because the file itself is in the project root directory and is not in the nested path directory.

Summary, regardless of hash mode or history mode, you can directly use "/" to introduce static files from the project root directory.

PS: I encountered this problem some time ago. After searching on Baidu for a long time, I found that few people asked this question, and no one answered it. I also asked many front-end experts, but still couldn't solve this problem. Maybe it’s because I’m used to writing “./” And the path starting with "../", I didn't notice the problem of the way to introduce static files, and tried many methods. Finally, I found out embarrassingly that the problem was actually very simple, it was just that I didn't have a thorough understanding of the underlying framework!

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 connect node.js to MySQL

Detailed explanation of the steps to implement react server rendering

The above is the detailed content of How to deal with the problem that the rendered page is not reflected when Vue routing is refreshed in history mode. For more information, please follow other related articles on the PHP Chinese website!