vue routing switch route does not refresh

In Vue development, routing is a very important concept. It can help us switch pages and also easily manage the status of different pages. When using Vue routing, sometimes the page does not refresh when routing is switched. This article will explore this issue from several aspects.

1. Routing Overview

In Vue, routing is a very important concept. Routing refers to the path or link used when switching between pages. By defining routes in Vue components, we can implement page switching and state management. The operations of using routing in Vue basically rely on the Vue Router plug-in.

2. Routing refresh problem

In Vue development, we sometimes find that the page is not refreshed when switching routes. This will cause the data in the page to not be updated, thus affecting the normal display of the page. So why does this happen? We can discuss it from the following aspects.

1. Browser cache

Browser cache means that the browser will automatically cache some data when visiting a website so that the page can be loaded faster the next time you visit. When we visit the same page, the browser reads the data from the cache instead of re-fetching the data from the server. This will result in the data on the page not being updated and not refreshing.

In order to avoid this situation, we can use the following method:

When routing is switched, set a unique cache time for each route, so as to ensure that it can be refreshed every time it is accessed. Get the data instead of reading it from the browser cache.

2.keep-alive

There is also a keep-alive component in Vue, which can help us cache component instances and re-render cached components when needed. If the keep-alive component is used when switching routes and the cache time is not set, the component will not be re-rendered when the route is switched, resulting in the page not refreshing.

In order to solve this problem, we can set the include and exclude attributes on the keep-alive component to control which components need to be cached and which components need to be re-rendered. At the same time, we can also set the max attribute to control the maximum number of caches to avoid memory overflow.

3. Route guard

You can use route guard to deal with routing switching problems. In the beforeRouteUpdate hook function, you can trigger the custom method in the component to achieve data retrieval and page refresh.

There are four routing guards in Vue: beforeEach, beforeResolve, afterEach and beforeRouteUpdate. The beforeRouteUpdate hook function is triggered when the route is switched, and will only be triggered when the current component is reused. Therefore, we can perform relevant operations in this hook function to avoid the problem of page not refreshing.

3. Solution

For the problem of not refreshing the page when routing is switched, we can use the following solutions:

1. Add the routing cache time.

2. Set the include and exclude attributes on the keep-alive component to control the caching and re-rendering of the component.

3. Use the beforeRouteUpdate hook function in the route guard to trigger the custom method in the component.

4. Use different routing methods, such as using the router.push method instead of the router.go method.

To sum up, in order to avoid the problem of not refreshing the page when routing is switched, we need to solve it from multiple aspects. In the actual development process, we need to choose the most appropriate solution according to the specific situation to ensure the normal display of the page.

The above is the detailed content of vue routing switch route does not refresh. For more information, please follow other related articles on the PHP Chinese website!