The document,

Let’s start with the official Vue Router documentation

  1. Responds to changes in routing parameters

    In real development, it is often necessary to map all routes that a pattern matches to the same component. For example, we have a User component that is used to render for all users with different ids. We can use dynamic segments on vue-router routes to achieve this effect:

Now, things like /user/foo and /user/bar will map to the same route.

A “path parameter” uses the colon: notation. When a route is matched, the parameter value is set to this.$route.params, which can be used within each component. So we can update the User template to print the ID of the current User:

In addition to $route.params, the $route object provides other useful information, such as $route.query (if the URL has query parameters), $route.hash, and so on.

  1. Capture all routes or 404 Not found routes

    When reusing components, you can simply watch the $route object to listen for routes:

If we want to match any path, we can use the wildcard (*)

  1. Advanced matching mode

Vue-router uses path-to-regexp as a path matching engine, so it supports many advanced matching modes, such as optional dynamic path parameters, zero or more, one or more, and even custom regular matching.

  1. Matching priority

Sometimes, the same path can match multiple routes. In this case, the matching priorities are in the order of route definition. The earlier the routes are defined, the higher the priorities are.

Tread pit plus expansion

  1. Vue Router Dynamic routes match pits

    Those of you who use Vue know that there is a Component file in the SRC directory where we normally dump reusable components. When used, it is introduced in the form of import and passes parameters to reuse components in the form of props.

However, in some cases, the entire page may need to be reused (or subpages), and the hash value will generally change accordingly. This time to use the above way is a little inappropriate, so we can use the form of dynamic routing to complete this requirement. This is also done by creating a new public Vue component and introducing it with Component.

We then use programmatic navigation in other pages, such as router.push(‘/dynamic/one’) to jump to the corresponding reuse page. Here’s another tidbit: push(‘/dynamic/one’) gets the dynamic hash value that passes through, and the parameter is stored in this.$route.params.

Little surprise

As a more popular framework, it must be more perfect in some details. Further performance optimizations are also considered for pages that are directly reusable. So, when routing parameters are used, such as navigating from /dynamic/one to /dynamic/two, the original component instance is reused. Because both routes render the same component, reuse is more efficient than destroying and recreating. This means, however, that the component’s lifecycle hook functions are no longer called.

That’s when the stomp point comes, first in the official documentation. If you want to respond to changes in routing parameters when reusing components, you can simply watch the $route object. But actually we misunderstood, there is a requirement here, must be the child route to jump, can be monitored. So we push to another page and change the root hash so that it can’t be listened on.

In fact, there are a lot of knowledge points in the chapter of dynamic routing matching, there are also a lot of holes the author did not go to fill. For example, the common {path: ‘*’} is used to catch client 404 errors.

  1. Scrolling behavior

    Sometimes, business requirements require us to navigate to a certain location by default when the page jumps. The Vue Router already does this for us. This is the scrollBehavior hook function. One small note: this feature is only available in browsers that support history.pushState.

The scrollBehavior method accepts to and FROM routing objects. The third parameter savedPosition is available if and only if popState navigation (triggered by the browser’s forward/back buttons).

As shown above, there are other ways to write it:

  • { x: number, y:number }

  • { selector: string, offset? : { x: number, y: number }}

Similarly, sometimes we want to switch routes, wait a few seconds, and then scroll to the specified location. ScrollBehavior also supports asynchronous scrolling. It is written as follows:

Because Vue is an easy framework to use, many people tend to despise it and do not seriously read its official documents. In fact, it also has a lot of strange and clever techniques to help us solve business needs, sometimes a small function can solve big needs. I don’t know if this article is helpful to you. If it is, please pay attention to it.

​

PS: You can leave a message three times if you think it is helpful to you, welcome to put forward valuable comments, also welcome you interested in the relevant technology developers (invited by the team developer wechat x118422) to join the group, online answer the discussion of data visualization, optimization chart performance and other technical questions ~