Vue-Router installation process and principle detailed

Backend routing:

The URL request address corresponds to the resources on the server, and different resources are returned according to different request addresses.

Front-end routing:

In a single-page application, based on events triggered by the user, changing the URL changes the displayed content without refreshing the page.

1. Front-end routing implementation principle

URL hash pattern

When changing the hash value, # is a location identifier that can jump to a location within the page without refreshing the page.

Change the hash value of the page through location.hash , such as:

We found that the page would not refresh.

URL history mode

In history mode, there are 5 ways to change the URL without refreshing the page, namely:

• history.pushState() //Push onto the stack
• history.replaceState() // Replace the current url and cannot return to the previous page
• history.back() //Return to the previous page
• history.go(n) //n can be greater than 0, indicating a number of steps forward, and less than 0, indicating a number of steps backward
• history.forward() //One step forward

history.go(-1) is equivalent to history.back()

history.go(1) is equivalent to history.forward()

The three major front-end frameworks all have their own routing:

Angular has ngRouter

React has ReactRouter

Vue has vue-Router

2. Basic use of vue-Router

2.1. Installation

npm install vue-router --save

The premise of using vue-router is that vue must be used

Import vue-router into index.js in the router folder

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter) //reference vue-router plugin

2.2. Configure routing

//Configure the relationship between routing and components const route=[
  {
      path: '/',
    // When accessing '/', the route redirects to the new address '/home'
    redirect: '/home',
  },
  {
     path: '/home',
     component: home,
   },
   {
     path: '/login',
     component: login,
    },
]
 

2.3. Instantiation

const router = new VueRouter({
  mode: "history", //Set mode routes
});
 

2.4. Mounting Routes

Go to main.js , instantiate Vue, and mount router on Vue.

let app = new Vue({
 el:'#app',
  data:{},
  // Mount to the vue router,
})
 

2.5. Add router-link and router-view to the page

<!-- Add a route -->
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>

<!-- Display routing content-->
<router-view />

By default, router-link will be rendered as an a tag, such as:

<router-link to="/home">Home</router-link>
// Render as <a href="#/home" rel="external nofollow" >Homepage</a>

router-view is used to take up space and display the components corresponding to the route at that location.

3. Router mode

There are two routing modes: hash and history .

3.1 Hash mode

vue-router uses hash mode by default.

The anchor in hash URL is the content after #xx. By using the anchor as the routing address, we usually change the content after # to enable the browser to render the specified component. Changes to the anchor will trigger onhashchange event.

3.2 History Mode

history is a normal URL without the # sign, and requires server configuration when used. In history mode, the corresponding methods are the same as the above 5 methods.

The required mode can be specified in vue-router :

const router = new VueRouter({
 mode:'history'
})

4. Router-link properties

By default, router-link will render into an a tag, but sometimes you may want to render into another tag.

4.1. Tag attribute

The tag attribute is used to set the router-link tag rendering type. For example, if we want to render router-link as button , such as:

<router-link to="/home" tag="button">Home</router-link>

Check the rendered element and you will find that it has become a button tag, and the corresponding attribute value added to will become invalid. Clicking at this time will not jump to the corresponding content. Please continue reading the jump method below.

In addition to button , the attribute value of tag can also be any other tag, and router-link automatically renders it into the corresponding tag.

4.2. replace attribute

replace corresponds to replaceState in the history mode above. No history record will be left when jumping. When replace is specified, you cannot return to the previous page.

<router-link to="/home" replace>Home</router-link>

4.3, active-class

active-class sets the class name of router-link currently selected when clicking it. By default, the class name is: router-link-active

<a href="#/" rel="external nofollow"  
 aria-current="page" 
 class="router-link-exact-active router-link-active">
 Home page</a>

To set the current element style, you need to set it to: router-link-active。

Set active-class, such as:

<router-link to="/" active-class="active">Home</router-link>
// router-link-active class name will be replaced with active

If you need to change the global router-link selection class names to custom ones, it is too much work to set them one by one. You can set them uniformly in the router.

const router = new VueRouter({
 routes,
 mode: 'hash',
  linkActiveClasss: 'active' //Set class names uniformly})

5. vue-Rrouter page jump method

5.1. router-link implementation

// Simple writing <router-link to="/">Home</router-link>

//Use dynamic path
<router-link :to="{ path : '/' }"></router-link>
You can use path or name

// Jump to 1 with parameter passing
<router-link :to="
{ name:'home', params:{ id:'123' , name:'gq' }}
">
</router-link>

// Jump with parameter <router-link :to="
{ path:'/', query:{ id:'123' , name:'gq' }}
">
</router-link>
 

5.2. Redirection via js

// Simple writing this.$router.push({ path:'/' })
// push is the same as history.pushState // jump with parameters this.$router.push({
 name: 'home' , params: { id:'123' , name:'gq' }
})

//With multiple parameters this.$router.push({
 name: 'home' , 
 params: { id:'123' , name:'gq' },
 query: { plan:'private' }
})

6. Dynamic Routing

In some cases, the path of a page may be uncertain, such as the expected path is /user/123 or /user/456 . The value behind it is the user ID or other value.

Configuring Routes

routers:[
 {
     path: '/user/:id',
   component:()=>{ import('../views/user.vue') }
 }
]
 

Adding Routes

<router-link to="/user/123"> user:123 </router-link>
<router-link to="/user/456"> user:456 </router-link>

 
//Dynamically set the id value <router-link :to=" '/user/'+id "> user:{{ id }} </router-link>

Get the dynamic value behind

this.$route.params.id 

The id here is the id set in the configuration route, just keep it consistent

Method 2: Use query to pass parameters

<router-link to="/user?id=123"></router-link>

//When getting the value this.$route.query.id

In addition, this.$router.addRoutes([]) can also add dynamic routes, which passes an array, the same as routes configuration.

7. Lazy loading of routes

Lazy loading means loading when it is used and not loading when it is not used.

When packaging and building an application, the js package will become very large, affecting the loading speed. If we can split the components corresponding to different routes into different code blocks, and then load the corresponding components when accessing the route, it will be more efficient.

What exactly does lazy loading of routes do? The main function is to package the components corresponding to the route into a js code block, and only load the corresponding js when the route is accessed.

//Directly reference import Home from './component/home'
const routes = [
 {
  path:'/home',
  component:Home
 }
]

//Lazy loading const routes = [
 {
  path:'/home',
  component:()=>{ import('./component/home') }
 }
]

8. Nested Routes

In practical applications, it is usually composed of multiple layers of nested components.

Implementation steps:

First: create the corresponding sub-component and configure the corresponding sub-route in the route mapping.

Second: Use router-view tag inside the component

{
 path: "/body",
 component: ()=> import( "../components/bodyLayout.vue"),,
 children:[
  {
   path: "manager",
   component: ()=> import( "../components/blankView.vue"),
   children:[
    {
      path: "user",
      component: ()=> import( "../views/manager/user.vue")
     },
    ]
   },
  ]
}

When accessing the user component, the route is ：/body/manager/user

Note: When setting the path for nested routes, do not add "/", otherwise the route will change.

{
 path: "/user",
 component: ()=> import( "../views/manager/user.vue")
}
//At this point the access route becomes "/user"
 

9. Difference between router and route

Try to print router in main.js and print this.$router in any component. The print result is as shown below:

We found that the two results were exactly the same. In this way, it is not difficult for us to understand the following meaning.

router is a VueRouter instance with its own methods. For example, if you want to navigate to a different URL using the instance created with new VueRouter , you can use router.push , which is described in the jump method.

route is the currently active route object, which contains the current route information. Through this object, you can get path , params parameters, query parameters, name , matched , and hash

10. Routing Guard

Why use navigation guards? Let's consider a requirement: In a SPA application, how does the webpage title change as the page switches?

// Add created(){ in the corresponding component
 document.title="Test"
}

When you access this component, the title automatically switches to "Test"

If we use the above method, we will have to add as many components as the ones we have developed, which is too troublesome. Therefore, we need to use routing guards to make unified modifications and facilitate maintenance.

10.1 Global Guard

1>, Use router.beforeEach to register a global front guard, which will be passed whenever the route changes. The parameter received by beforeEach is a function containing three parameters.

router.beforeEach((to,from,next)=>{
//Route from from to to 
// We just need to add a name attribute to the route document.title = from.name
 next()
})

Note: The order of the above three parameters cannot be changed. next cannot be missing, it must be added, otherwise the page will not be able to jump to the next step and will be stuck in the blank area.

2>, Use router.afterEach to register a global after-guard.

router.afterEach((to,from)=>{
 console.log('back guard')
})

Both guards are global guards. afterEach is executed after the route jump is completed, so next is not needed. There are only two parameters.

10.2. Exclusive router guard

The guards defined directly in the route configuration are used in the same way as global guards, except that they are placed in one of the route objects and only work under this route.

{
 path: "/test",
 name: "Test",
 component: ()=> import( "../views/manager/test.vue"),
 beforeEnter:(to,from,next)=>{
  console.log('before test enters')
  next()
 }
}

These guards have the same method arguments as the global preceding guards.

10.3. Guards within components

You can define route navigation guards directly in the route component. The guards defined in the component are in-component guards.

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // Called before the corresponding route that renders this component is confirmed // No! able! Get the component instance `this`
    // Because the component instance has not been created before the guard is executed},
  beforeRouteUpdate(to, from, next) {
    // Called when the current route changes but the component is reused // For example, for a path /foo/:id with dynamic parameters, when jumping between /foo/1 and /foo/2,
    // Since the same Foo component will be rendered, the component instance will be reused. And this hook will be called in this case.
    // You can access the component instance `this`
  },
  beforeRouteLeave(to, from, next) {
    // Called when navigating away from the corresponding route of this component // You can access the component instance `this`
  }
}

Note: beforeRouteLeave is executed when leaving the route, and next must be added, otherwise it will not jump to the next route normally.

11. keep-alive

When switching routes, the page will be re-rendered every time. Some of our components will have some data that needs to be retained. We don’t want to re-render every time we switch back and forth, so we use keep-alive to wrap the component, so that created mounted and other hook functions will only be executed when loading for the first time.

keep-alive is a built-in component of Vue that allows the included components to retain their state or avoid re-rendering.

<div id="app">
 <router-link to="/home">home</router-link>
 <router-link to="/login">login</router-link>
 <keep-alive>
  <router-view></router-view>
 </keep-alive>
</div>

Add a keep-alive component. When switching, the component will only render the first time and will not re-render after that.

11.1. Keep-alive specific methods

activated(){
 console.log('activated')
},
deactivated(){
 console.log("deactivated")
}

These two functions will only be executed if the component is kept in state and keep-alive is used.

Keep-alive life cycle execution order:

created -> mounted -> activated

deactivated is triggered only after exiting

11.2. keep-alive attribute

Keep-alive has two very important properties:

include - string or regular expression, only components that match will be cached

exclude - a string or regular expression, any components matching this will not be cached

<keep-alive include="test">
 <router-view></router-view>
</keep-alive>

//test component adds name attribute <template>
  <div>
    test
  </div>
</template>
<script>
 export default {
  name:'test'
 }
<script>

At this time, only test component will be cached, and no other components will be cached.

If there are other components that need to be cached at the same time, include can add multiple values, separated by commas but no spaces.

<keep-alive include="test,user">
 <router-view></router-view>
</keep-alive>
 

Use of exclude:

<keep-alive exclude="test,user">
 <router-view></router-view>
</keep-alive>

Just the opposite of the previous example, only test and user components are not cached, while the others are cached.

This is the end of this article about the detailed process of vue-Router installation principle. For more relevant vue-Router content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!