This article is intended for developers who have some familiarity with vue.js and vue-Router

The vue-Router version is 3.0.2 unless otherwise specified

The body of the

  • Route Class Matching


    After a route is matched, a class attribute value is added to the tag. Router-link-active is very convenient in nested routes

    The actual attribute value of class can be passedactive-classGlobal defaults are constructed by route optionslinkActiveClassTo control the

    By default, all the parents of the current route are added by defaultactive-class, that is, currently in/user/1Will be given to the current page<router-link to="/">addactive-classIf you don’t need this item here<router-link>addexactThe class with the exact match passesexact-active-classcontrol

    Example: JSFiddle

  • Wildcard route

    Route configuration: {path: ‘/user-*’} to access the /user-admin route, $route.params.pathMatch (pathMatch is only available at [email protected]+, $route.params[0] $route.params[0]

    Example: JSFiddle

    Document: Capture all routes or 404 Not found routes

  • Route advanced matching mode

    Vue-router uses path-to-regexp as a route matching engine. The library can generate regular expressions of matching rules based on the entered paths to achieve route matching.

    The third parameter is pathToRegexp(path, keys, options). In [email protected]+ you can add advanced configuration options by configuring the pathToRegexpOptions parameter of route.

    For example, this can be done via ‘/optional-params/:foo? ‘Implements optional param, or can match only numeric param by ‘/params-with-regex/:id(\\d+)’.

    The contents of pathToRegexpOptions are:

    • Sensitive (default: false)
    • Strict Whether the trailing slash matches exactly (default: false)
    • End Global matching (default: true)
    • Start Expands the match from the start position (default: true)
    • Delimiter Specifies other delimiters (default: ‘/’)
    • EndsWith specifies the standard end character
    • Whitelist Specifies a list of delimiters (default: undefined, any character)

    Source: vue-router/ SRC /create-route-map.js:154

  • Hook handling for programmatic navigation

    At [email protected]+, it is optional to provide onComplete and onAbort callbacks as the second and third arguments in router.push or router.replace. These callbacks will be called when the navigation completes successfully (after all the asynchronous hooks have been resolved) or terminates (navigation to the same route, or to a different route before the current navigation completes). This feature can be used in a few buried scenarios without having to configure complex routing hooks.

  • Route redirection

    Configuring the redirect attribute for a route enables the route to be redirected to the specified route. This attribute supports String, Object, and Function values, where Function is the to Object

    Add to the redirected intermediate routebeforeEach 和 beforeLeaveIt won’t work. HererouterThe added hook cannot detect the redirection. If you need to determine the source of the redirection, you can use a routing object$route.redirectedFromjudge

    This function is suitable for redirection that retains the original route after the path is changed

    Document: redirect

  • Nested named views


    name prop can be used when displaying multiple views horizontally (a single view uses multiple levels of

    ). For example, in the layout page sidebar/ List, there is no need to write the logic of many child components in the parent view container. Only the related page components need to be configured in the routing configuration, so as to decouple the component relationship and effectively control the subview rendering

    Example: JSFiddle

    Documents: Nested named views

  • Routing alias

    Setting the alias attribute to a route enables visitors to keep the original URL and access the specified route.

    This property supportsString 和 ArrayTwo types, whenaliasIf the route is the same as another route, the route declared first prevails and the alias does not match the route class

    Document: Aliases

  • Route component parameters are transmitted

    $route.params = / props = / prams = / props = / prams = / props = / prams

    If props is an object, the object content is passed as static content to the component as props

    When props is a function, the function receives a route argument and can pass Query as props to the component or implement more advanced functions

    Documentation: Routing components pass parameters

  • Complete navigation parsing process

    1. Navigation is triggered.
    2. Call the leave guard in the inactivated component.
    3. Call the global beforeEach guard.
    4. Call the beforeRouteUpdate guard ([email protected]+) in the reused component.
    5. Call beforeEnter in routing configuration.
    6. Parse the asynchronous routing component.
    7. Call beforeRouteEnter in the activated component.
    8. Call the global beforeResolve guard ([email protected]+).
    9. Navigation confirmed.
    10. Call the global afterEach hook.
    11. Trigger a DOM update.
    12. Call the callback passed to Next in the beforeRouteEnter guard with the created instance.

    Documentation: Complete navigation parsing flow

  • Scrolling behavior

    Create a Router instance that provides a scrollBehavior method that accepts to, FROM, and savedPosition.

    In this method, returning {selector:to.hash} also implements behavior similar to “scroll to anchor”, and [email protected]+ also returns {offset? :{x,y}} performs position offset. Note that the negative value of the offset is offset to the negative direction

    Its asynchronous scrolling is usually used in niche situations where the transition component and the rolling behavior go hand in hand, and the official example doesn’t give much information about it

    Document: Scroll behavior

  • Component lazy loading – by component block

    Due to the feature of All in JS, the first screen loading of SPA (Single Page Application) is slow. Many people recommend using the code splitting function of Webpack to reduce the size of a single JS. When All page components are dynamically loaded, the page request will be too much and the loss is outweighed by the gain. So components emerge in terms of components:

      const Foo = (a)= > import(/* webpackChunkName: "group-foo" */ './Foo.vue')
  const Bar = (a)= > import(/* webpackChunkName: "group-foo" */ './Bar.vue')
  const Baz = (a)= > import(/* webpackChunkName: "group-foo" */ './Baz.vue')
Copy the code

    This feature requires[email protected] +support

    Documentation: Grouping components into components

  • Gets the route matching component

    router.getMatchedComponents(location?)

    This function can be used to get an array of routing objects matched by the incoming parameters in the routing table. It can be used to get the current array of routing objects, as described in the official documentation, usually when server rendering data is preloaded

    If you need to get the current routing record (that is, a copy of the object in the Routes configuration array, including the children array), use route.matched

    $matchedComponents $route. Matched

  • Parsing the routing

    router.resolve(location, current? , append?)

    This function exports both a browser-like Location object and an Resolved route that records resolved. If no match is found, the Resolved field returns 404 components or error data by default

    Documents: the router. The resolve

  • Add the routing

    router.addRoutes(routes:Array<RouteConfig>)

    This function can be triggered by the user to add a route to the routing table, which can be tried in user permission control

    Documents: the router. AddRoutes

advice

  • Simple button route jump logic does not use V-ON :click event, use

    tag.

  • If the SPA placement path is in a subdirectory of the domain name, do not follow some web tutorial to change the WebPack configuration. Instead, change the base value in the Router build option to avoid unnecessary problems

  • Do not try to change the contents of $route in the component. This property is read-only and the properties inside it are immutable, but you can watch this

The resources

  1. Url regular expression: path-to-regexp – shorthand
  2. vue-router Document
  3. vue-router Source Code

First address of this article

blog.shoyuf.top

This is my first post on the nuggets. Welcome to comment