Vue routing notes: programmatic navigation, as well as route redirection with 404 and route pass value, pass parameter

1. Route navigation type

1.1. Declarative navigation

In fact, it replaces the tag with the pair tag and pre-declares the child path to jump to in its to attribute, usually manually clicking the jump

1.2. Programmatic navigation

It is to use JS mode to jump instead of a tag mode. There are two positioning modes to choose from, path or name. As can be seen from the following figure, programmatic navigation can jump without relying on the form of A tag. The name and path defined in the rule array must be the same as the parameter passed in otherwise it will not be found. Note: The event function parameter receives a single path, so the following push object attribute must correspond to path and the single name object must correspond to name.

2. Route values and parameters are transmitted

2.1. Declarative navigation value transmission:

1. Add [? Key =value] to the main path of the template of the App root component using the query string query mode

Receive with {{$router.query. key}}

2. Use params to pass the value. This method needs to define the path in the rule array in advance before it can be used. The path of the rule array needs to be modified by adding [/ : key] after the path. Add [/value] to the template main path of the App root component. The receiving mode is {{$router.params.key}}.

2.2 Programmatic navigation parameter transmission:

1. There are two ways to pass parameters: query and params. Select either of them and params will be ignored.

Add a Query or params object to the push method that writes the data you want to pass. The query object receives the data using {{router.query.key}} and the params object receives the data using {{router.params.key}}

3. Route redirection

It’s easy to understand. When the page first comes in, we want the user to see the child routing page we specified, so we need to redirect. Use the redirect to set the mandatory redirect path. If you want to redirect the rule array, you need to write the rules in the array first

4. Route 404 page

This is easy to understand, is the path of the user access to a nonexistent, need to show the user a 404 page, rather than a blank page, with just the routing redirection experience, there must also write rules in the rules of array, pay attention to this kind of miss rules to write 404 page at the end of the array of rules, because parsing the array in sequence once resolution to this article, It goes straight to 404.