Route hooks and asynchronous requests

Official documentation: Hook functions and arguments – vue.js

Review the two diagrams in the Vue lifecycle, where hooks are involved.

1. What are hook functions

  • Hook functionThe hook function catches an event at the system level when it is triggered and then does something about it.A program used to process system messages.A hook is an opportunity to do something at some stage.
      1. Is a function called by the system when a system message is triggered
      1. It’s not triggered by the user

The name of the hook function is deterministic and is called automatically when triggered by a system message.

For example, react’s componentWillUpdate function is called when the component state changes and needs to be updated.

Common hook functions:

  • React life cycle function
  • Vue lifecycle functions
  • Vue custom instructions
  • …

What is a hook function

2. Route hooks

  • beforeRouteEnter: Executed before entering the route
  • beforeRouteLeave: Executed before leaving the route
  • beforeRouteUpdate: Vue2.2 added for updating the parameters of the same routing component

  • Are timing functions that you can use to do things like send asynchronous requests before the page loads.

  • Like a filter, or an interceptor surround.

  • They are on the same level as data and methods:

beforeRouteLeave(to, from, next) {
    next()
},
beforeRouteEnter(to, from, next) {
    next()
},
beforeRouteUpdate(to, from, next) { 
    next()
},
data: {},
method: {}
Copy the code

2.1 Parameter Description

  • toRoute Information about the route to be jumped
  • fromPath Indicates the path before the jump
  • nextControl parameters of the route,There has to be anextmethods
    • next()Jump to the next page,
    • next('/path')Change the forward direction of the route to the next page
    • next(false)Return to the original page
    • next((vm) => {})Only in thebeforeRouteEnterAvailable in,vmIs a component instance
BeforeRouteEnter: (to, from, next) => {console.log(' Before entering the route... '); Next () // Required}, beforeRouteLeave: (to, from, next) => {console.log(' Before leaving the route... ') next() // Required}Copy the code

Check whether logs are displayed before entering and leaving the route on the console.

3. Use asynchronous requests in hook functions

The official document: vue – axios | axios Chinese website

  1. The installationAxios:
npm install --save vue-axios
Copy the code
  1. main.jsThe introduction ofAxios:
import axios from 'axios'
import VueAxios from 'vue-axios'

/ / use
Vue.use(VueAxios, axios)
Copy the code
  1. To prepare test data, create astatic/mock/data.json:

Static data is stored in the Mock folder under the static folder

{
    "name": "MelodyJerry"."url": "https://melodyhub.ltd/"."page": 1."isNonProfit": true."address": {
      "street": "Guangzhou"."city": "Guangdong"."country": "China"
    },
    "links": [{"name": Blog Park."url": "https://www.cnblogs.com/melodyjerry/"
      },
      {
        "name": "GitHub"."url": "melodyhub.ltd"
      },
      {
        "name": "Gitee"."url": "https://melodyjerry.gitee.io/"}}]Copy the code
  1. runnpm run devTo accesshttp://localhost:8080/static/mock/data.json, get JSON data:

  1. inbeforeRouteEnterTo make an asynchronous request:
<script> export default {name: "UserProfile", // pass parameter props: ['id'], beforeRouteEnter (to, from, next) {console.log(" Before entering route... ); Next (vm => {// send an asynchronous request and release vm.getDatd(); // Execute getData method before entering route}); }, beforeRouteLeave (to, from, next) {console.log(" After entering the route... ); next(); }, methods: {getDatd: function () {this.axios({methods: 'get', url: 'http://localhost:8080/static/mock/data.json' }).then(function (respone) { console.log(respone); }) } }, } </script> <style scoped> </style>Copy the code
  1. runnpm run dev, open the console:

Refer to the article

[0] Vue.js official document

[1] Template tag (vue)

[2] [Vue2] [Vue2] [Vue2] [Vue2]

[3] Vue-router several ways to transmit parameters

[4] Assets and static in VUE

[5] [VUE] 2. Render component & Redirect route

[6] Vue2. X Custom redirection route Component

[7] Understand what hook functions are

[8] beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave

[9] VUE Route hook interceptor beforeEach and afterEach and page route change route listener

[10] beforeRouteEnter, beforeRouteLeave function