Vue routing Transitional effect Data acquisition method

Transitional effect

<router-view> is a basic dynamic component, so we can add some transition effects to it using the <transition> component:

<transition>
 <router-view></router-view>
</transition> 

Transitions of a single route

The above usage will set the same transition effect for all routes. If you want each routing component to have its own transition effect, you can use <transition> within each routing component and set a different name.

Dynamic transitions based on routing

You can also dynamically set the transition effect based on the changing relationship between the current route and the target route.

<!-- Use dynamic transition name -->
<transition :name="transitionName">
 <router-view></router-view>
</transition>
// Then in the parent component// watch $route determines which transition to usewatch: {
 '$route' (to, from) {
  const toDepth = ('/').length
  const fromDepth = ('/').length
   = toDepth < fromDepth ? 'slide-right' : 'slide-left'
 }
} 

Data acquisition

After entering a certain route, you need to obtain data from the server. For example, when rendering user information, you need to get user data from the server. We can do it in two ways:

1. Get it after the navigation is completed: Complete the navigation first, and then get the data in the following component life cycle hook. Instructions like "Loading" are displayed during data acquisition.

2. Get before navigation is completed: Before navigation is completed, get data in the route's enter hook, and execute navigation after the data is successfully obtained.

Get data after navigation is completed

When you use this method, we will immediately navigate and render the component, and then get the data in the component's created hook. This gives us the opportunity to display a loading state during data acquisition, and also to display different loading states between different views.

Suppose we have a Post component that needs to obtain the article data based on $:

Get data before navigation is completed

In this way, we get data before navigating to a new route. We can get data in the next component's beforeRouteEnter hook, and only call the next method after the data is retrieved successfully.

Here is the address:/haxxk/xu_s...
/haxxk/xu_s...

Summarize

The above is the Vue routing transitional animation data acquisition method introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!