Before the beginning, fresh gram has an end

A long journey begins at a single step

In the front-end work, almost every project uses routing, and the more pages === the more routes;

I often use routing in my work, but after reviewing it, IT seems that it is some common operations, such as programmatic navigation, navigation guard, etc., so that THE rest of the basic knowledge and efficient operation have been neglected.

The purpose of writing this article is to review the vue-Router knowledge comprehensively and sort out a knowledge system roughly.

Due to length reasons, the content of the article may be in part of the depth and breadth of knowledge is not enough, but also hope you big guy light spray 🚀

1. Historical process

  • Once upon a time, pages were rendered through back-end routing (see below) (performance issues);

  • In the late 1990s, Microsoft was the first to implement Ajax front-end rendering (front-end partial rendering improves performance, but does not support browser forward and backward operations).

  • With the development of technology, the three frames dominate the front end circle and become the main force of the front end development. The front end can also do more things, and gradually there are modular and componentized concepts;

  • Of course, there are single-page applications, MVVM also gradually appeared in the front er vision;

  • At this point, front-end developers are able to develop larger applications and become more powerful, so what does this have to do with front-end routing?

    A more advanced version of the asynchronous interaction experience is SPA, a single-page application. Single-page applications are not only refresh-free for page interactions, but also for page jumps. Since the jump to the page is refresh-free, that is, the whole HTML is no longer requested back to the browser for rendering

    So, a large application will usually have dozens of pages (URL address) jump to each other, how does the front end know what url corresponding display content? The answer is — front-end routing (see below);

2. Basic concepts and principles of routing

Routing is a relatively broad and abstract concept, the essence of routing is correspondence, for example? Route A corresponds to page A.

Development generally divides routing into back-end routing and front-end routing:

2.1. Back-end Routing

Concept: return different content according to different user URL requests;

Essence: the mapping between URL request address and server resources, one-to-one correspondence;

Disadvantages:

When there is no separation at the front and back end, the server is directly to return the entire HTML, the user every time a small operation will cause the entire page refresh, coupled with the previous network speed is very slow, so the user experience can be imagined;

Advantages:

An operation that has no merit or necessity;

2.2 front-end routing

Concept: display different page content according to different user events;

Nature:

Mapping between user events and event handlers;

Alternatively, establish and manage the mapping between urls and corresponding components (pages);

It can be understood that front-end routing is to give the front-end to do the task of returning different pages according to the different URL of the server.

advantages:

Good user experience, do not need to get all from the server every time, quickly show to the user;

Disadvantages:

Using the browser’s forward and back buttons to resend requests does not mean rerequesting HTML resources, not using caching properly;

A single page can’t remember the previous scrolling position, and can’t remember the scrolling position when moving forward or backward.

Finally:

Front-end routing is an essential function of modern SPA applications. Each modern front-end framework has its corresponding implementation, such as VUe-Router and React-Router.

Regardless of which route is implemented using hash, which is more compatible, or H5’s History implementation, the framework just needs to encapsulate it accordingly.

🚀 🚀 🚀

Next, let’s get to vue-Router

3. Vue-router is commonly used

3.1 Two routing modes

3.1.2, hash

If the routing mode is not specified, vue-router uses hash mode by default.

Hash (that is, #) is the anchor point of the URL, representing a location in the web page, and # is just a guide to the browser, not the server! It is not included in the HTTP request and therefore does not reload the entire page;

However, every time the hash changes, the Haschange event is raised. So we can respond by listening for changes to HasChange, such as updating a piece of data on the page;

In VUE you can use Watch to listen for changes in routing objects or route guards to do the same, see below;

In addition, when the hash changes, the url is recorded by the browser, so that you can use the browser back;

To sum up:

Hash mode allows the browser to render the specified component or scroll to the corresponding location by changing the value after #.

3.1.3, history,

If you don’t want ugly hashes, you can use the history mode of the route, which makes full use of the history.pushState API to jump urls without reloading the page.

const router = new VueRouter({
  mode: 'history'.// Set the routing mode to history
  routes: [...]. })Copy the code

When you use the history mode, URL like normal URL, such as http://xxxxxx.com/user/id;

Note:

Although the history mode can discard ugly # and move forward and backward normally, when the browser is refreshed, the browser will visit the server and, without background support, may get a 404 page!

Therefore, you need to add a candidate resource on the server that covers all cases: if the URL does not match any static resource, it should return the same index.html page that your app relies on.

3.2 dynamic route matching and parameter transmission

3.2.1 Router, route, routes

Before we get into routing, here are three things:

  • routerB: Generally speakingRouting instance, such as $router
  • route: Refers toRoute objects, for instance,$routeRefers to the current routing object
  • routes: refers to therouterOf the routing instanceroutes API, which is used toconfigurationmultiplerouteRoute objects

3.2.2 Introduction to attributes of routing objects

In order to understand below is convenient, simple here introduce the commonly used routing object properties, within the component by this. $route access;

$route.path :

String Indicates the path of the current route. It is always resolved to an absolute path, such as “/foo/bar”.

$route.params :

Object A key/value Object that contains dynamic fragments and fully matched fragments. If there are no routing parameters, it is an empty Object.

$route.query :

Object A key/value Object representing URL query parameters. For example, for path /foo? $route.query.user == 1; $route.query.user == 1;

$route.name :

The name of the current route, if any. It is recommended that each routing object be named for later programmatic navigation. But remember that the name must be unique!

$route.hash :

String Hash value (with #) of the current route, empty if there is no hash value.

$route.fullPath :

String Indicates the parsed URL, which contains the query parameters and the full path to the hash.

$route.matched :

Array

An Array containing route records for all nested path fragments of the current route. The routing record is a copy of the objects in the Routes configuration array (and in the Children array).

$route.redirectedFrom :

If there is a redirect, that is, the name of the route from which the redirect originated.

3.2.3 dynamic Routing?

Dynamic routing matching is essentially passing parameters through THE URL and reciting three times.

Scenario: We often need 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:

<router-link to="/user/1"> User component1</router-link>
​
const router = new VueRouter({
  routes: [
    // Dynamic path parameters start with a colon
    { path: '/user/:id'.component: User }
  ]
})
Copy the code

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:

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
Copy the code

3.2.4. Parameter Transmission in Params mode

Here’s an example:

<router-link to="/user/2"> User component2</router-link>
const router = new VueRouter({
  routes: [
    // Dynamic path parameters start with a colon
    { path: '/user/:id'.component: User }
  ]
})
Copy the code
const User = {
  template: '<div>User {{ $route.params.id }}</div>' 
}
Copy the code

Disadvantages:

3.2.5. Parameter Transmission in query mode

Here’s an example:

<router-link to="/user? id=3"> User component3</router-link>
const router = new VueRouter({
  routes: [{path: '/user'.component: User } // Notice that there is no slash after user]})Copy the code
const User = {
  template: '<div>User {{ $route.query.id }}</div>' 
}
Copy the code

3.2.6 Summary of parameter transfer methods

There are only two types of page arguments, query and params. Params is displayed in the URL as /params, and query is displayed as? Query =query1 is expressed in the URL;

In addition, using the params parameter also needs to be configured to the route definition, otherwise it will not appear in the URL and the refresh will disappear.

If you pass the params parameter, do not use the path field, otherwise it will not work. The query parameter does not have this limitation, using either the name or path fields.

3.2.7 Routing component props style (Decoupled) Parameter transfer

Parameters can be sent by route through params and Query.

However, these two methods of parameter transmission essentially put parameters on the URL and change the URL, which will cause a high coupling between parameters and components.

If I want to pass parameters more freely, I can decouple the props of routes to improve component reuse without changing the URL.

Case 1:

Enable the props parameter:

<router-link to="/user/4"> User component4</router-link>
const router = new VueRouter({
  routes: [
    // Dynamic path parameters start with a colon
    { path: '/user/:id'.component: User, props: true } // Note the difference with case 1]})Copy the code
const User = {
  // props: ['id'], // routes
  template: '<div>User {{ $route.params.id }}</div>' 
}
Copy the code

Case 2:

Enable the props parameter and pass data through props:

<router-link to="/user/5"> User component5</router-link>
const router = new VueRouter({
  routes: [
    // Dynamic path parameters start with a colon
    { path: '/user/:id'.component: User,  props: { uname: 'lisi'.age: 20}}}])Copy the code
const User = {
  props: ['age'.'uname'.'id'].template: '< div > User id is: {{id}} name is: {{uname}} age is: {{age}} < / div >'
}
Copy the code

Disadvantages:

Although it is convenient and concise, it cannot get the ID because there is no ID data to pass when using props

Case 3:

Enable the props parameter, and pass data through props (pass parameters of function type — perfect operation) :

<router-link to="/user/6"> User component6</router-link>
const router = new VueRouter({
  routes: [
    // Dynamic path parameters start with a colon
    { 
     path: '/user/:id'.component: User,  
     props: route= > ({ uname: 'zs'.age: 20.id: route.params.id }) / / get the id}]})Copy the code
const User = {
  props: ['age'.'uname'.'id'].template: '< div > User id is: {{id}} name is: {{uname}} age is: {{age}} < / div >'
}
Copy the code

3.3. Set routines by

Nothing to say, just follow the rules, as follows:

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <! -- Import vue file -->
    <script src=". / lib/vue_2. 5.22. Js. ""></script>
    <script src=". / lib/vue - router_3. 0.2 js. ""></script>
  </head>
  <body>
    <! -- Area controlled by vm instance -->
    <div id="app">
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>
​
      <! -- Route placeholder -->
      <router-view></router-view>
    </div>
​
    <script>
      const User = {
        template: "<h1>The User component</h1>"}; const Register = { template: `<div>
          <h1>Register the component</h1>
          <hr/>
​
          <! -- Child routing links -->
          <router-link to="/register/tab1">tab1</router-link>
          <router-link to="/register/tab2">tab2</router-link>
​
          <! -- Placeholder for child routing -->
          <router-view></router-view>
        <div>`}; const Tab1 = { template: "<h3>Tab1 subcomponents</h3>"}; const Tab2 = { template: "<h3>Tab2 subcomponents</h3>"}; Const router = new VueRouter({routes: [{path: "/", redirect: "/user"}, {path: "/ user," component: user}, / / -- -- -- -- -- the children array said zilu rules by {path: "/ register", component: register, children: [{path: "/register/tab1", component: Tab1 }, { path: "/register/tab2", component: Tab2 }, ], }, ], }); // Create a vm instance object const vm = new Vue({// specify the control area el: "#app", data: {}, // mount router: router router,});</script>
  </body>
</html>
Copy the code

3.4 Route jump (declarative and programmatic)

Jumps of VUE routes are classified into two types:

  • declarativeUse:<router-link>Declare a jump,toProperty defines the parameters for the jump;
  • programmaticUse:router.go(),router.back(),router.push(),router.replace()Method to jump;

3.4.1. Declarative

For reasons of length, I will not write the demo. See

in 3.3, nested routines.

3.4.2 Programming

When do you usually use programmatic navigation? If you want to do something else before you jump to the route, such as permission validation, but with

, click on the link directly, you can use programmatic navigation!

Instead of using

to create an A tag to define navigation links, we can use the router instance method to write code to do so.

Note:

Within the Vue instance, you can access the routing instance via $router. So you can call this.$router.push.

To navigate to different urls, use the router.push method. This method adds a new record to the history stack, so when the user clicks the browser back button, it returns to the previous URL.

This method is called internally when you click

, so:

Click the router – link: to = “…” > is equivalent to calling router.push(…) “, just two coding methods, but my own work usually uses more programmatic navigation router.push.

declarative programmatic
<router-link :to="..." > router.push(...)

The argument to this method can be a string path or an object describing the address. Such as:

/ / string
router.push('home')
​
/ / object
router.push({ path: 'home' })
​
// Named route
router.push({ name: 'user'.params: { userId: '123' }})
​
// With query parameters, change to /register? plan=private
router.push({ path: 'register'.query: { plan: 'private' }})
​
Copy the code

Note:

If path is provided, params is ignored (path and Params are not valid at the same time), which is not the case with query in the above example.

Instead, in the following example, you need to provide either the route’s name or a handwritten path with arguments:

const userId = '123'
router.push({ name: 'user'.params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// Params does not work here
router.push({ path: '/user'.params: { userId }}) // -> /user
Copy the code
A, this $router. Push

Description:

Jump to the specified URL, add a new record to the history stack, click back to return to the previous page;

Use:

this.$router.push('/index')
this.$router.push({path:'/index'})
this.$router.push({path:'/index'.query: {name: '123'}})
this.$router.push({name:'index'.params: {name:'123'}})
Copy the code
B, this $router. Replace

Description:

Jump to the specified URL, replace the last record in the history stack, click back to return to the previous page;

Use: same as above push;

Scene:

1. When you don’t want the user to go back to the previous page, it is common to see permission verification. After verification, you don’t want the user to go back to the login page and verify again.

2. If you need to jump from page A to page B, then to page C, and then back to page C, you can directly go back to page A. Use replace() to jump from page B to page C.

C, this $router. Go

Description:

Similar to window.history.go(n), jump forward or backward n pages, n can be positive (forward) or negative (backward);

Use:

this.$router.go(1)    / / similar history. Forward ()
this.$router.go(-1)   / / similar to the history. The back ()
Copy the code
D, this $router. The back

This.$router. Go (-1)

3.5. Named Routes and Views

3.5.1 Naming routes

Sometimes it is more convenient to identify a route by name, especially when linking a route or performing some jumps. You can set the name of a route in the Routes configuration when creating the Router instance.

const router = new VueRouter({
  routes: [{path: '/user/:userId'.name: 'user'.component: User
    }
  ]
})
Copy the code

To link to a named route, pass an object to router-link’s to property:

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
Copy the code

This is the same thing as code calling router.push() :

router.push({ name: 'user'.params: { userId: 123}})Copy the code

Both methods navigate the route to the /user/123 path.

3.5.2 Naming views

Named views come in handy when you want to show multiple views at the same time (sibling) instead of nesting them, such as creating a layout that has sidebar (side navigation) and main (main content) views. Instead of having a single exit, you can have multiple individually named views in the interface. If router-view does not have a name, it defaults to default.

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
Copy the code

A view renders with one component, so multiple views require multiple components for the same route. Make sure to use the Components configuration correctly (with s) :

const router = new VueRouter({
  routes: [{path: '/'.components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})
Copy the code

Also, for information about nested named views, see the official Vue Router documentation: Nested Named Views

3.6. Redirects and Aliases

3.6.1. Redirect

Redirection is also done using the Routes configuration. Here is an example of redirection from /a to /b:

const router = new VueRouter({
  routes: [{path: '/a'.redirect: '/b'}]})Copy the code

The redirection target can also be a named route:

const router = new VueRouter({
  routes: [{path: '/a'.redirect: { name: 'foo'}}}])Copy the code

Or even a method that dynamically returns a redirected target:

const router = new VueRouter({
  routes: [{path: '/a'.redirect: to= > {
      // The method receives the destination route as an argument
      // Return redirects the string path/path object}}}])Copy the code
3.6.2, alias,

“Redirect” means that when the user accesses /a, the URL will be replaced with /b, and then the route will be matched with /b. What is the “alias”?

/aThe alias is/bMeans when the user accesses/b, the URL remains as/b, but the route match is/a, like user access/aThe same.

The route configuration is as follows:

const router = new VueRouter({
  routes: [{path: '/a'.component: A, alias: '/b'}]})Copy the code

The “alias” feature gives you the freedom to map UI structures to arbitrary urls, rather than being constrained by configuration nested structures.

4. Vue-router advanced

Content continues to be updated… (Due to the length, the content of this chapter will be written in a separate article, and will be replaced with portal after completion)

You can also check out the official documentation: Vue Router Advanced

Don’t think the instructions on the website are detailed enough? Well, you can surf the Internet again 🌊🌊🌊

5, through their own code to achieve vue-Router

Content continues to be updated… (Due to the length, the content of this chapter will be written in a separate article, and will be replaced with portal after completion)

6. Reference links

Each output of a knowledge point, are inseparable from the official documents to consult and read the bigwigs for a knowledge point of high quality interpretation:

  • Official document: Vue Router
  • Juejin. Cn/post / 684490…
  • Juejin. Cn/post / 694252…
  • Juejin. Cn/post / 684490…
  • Juejin. Cn/post / 684490…
  • Juejin. Cn/post / 684490…

🚀🚀🚀 this article is quite long, please make corrections for any shortcomings!