404 pages and routing hooks

Environment building

Routing mode

Two routing modes

• hash : Path belt #, Such as http://localhost:8080/#/main
• history : The path does not take #, Such as http://localhost:8080/main

Modify routing configuration

export default new Router({
    
  mode: 'history',
  routes: [
  ]
})

404 page

NotFound.vue

<template>
    <h1>404, Your page is lost ...</h1>
</template>

<script> export default {
      name: "NotFound" } </script>

<style scoped> </style>

Routing configuration

//  Import components 
import NotFound from '../views/NotFound'

//  Add path at the end  *
{
    
   path: '*',
   component: NotFound
 }

As long as it does not conform to the previous routing configuration path , Jump to NotFound Components ,404 page

Routing hook

beforeRouteEnter Before entering the route
beforeRouteLeave Execute before leaving the route

<script>
    export default {
    
      //  stay props Set the parameters of the route in 
      props: ['id'],
      name: "UserProfile",
      beforeRouteEnter(to,from,next)=>{
    
        //  Can't get component instance  this  Because before the guards execute , The component instance has not been created yet 
        console.log(" Before entering the route ");
        next();
      },
      beforeRouteLeave(to, from, next) {
    
        //  Called when leaving the corresponding route of the component   You can access the component instance  this
        console.log(" Before leaving the route ");
      }
    }
</script>

Parameters

• to : The goal to enter ( Routing objects )
• from : The route that the current navigation is about to leave
• next : Routing control parameters , Be sure to call this method
  • next() : Go to the next hook , If all hooks are executed , Go to the page
  • next(false) : Return to previous between pages
  • next('newpath') perhaps next({ path: 'newpath' }): Change the jump release of the route , Jump to newpath route
  • next((vm)=>{}) : Only in beforeRouteEnter Hook use ,vm Is a component instance

beforeRouteEnter Get data before entering the route

#  install  axios vue-axios  rely on 
npm install --save axios vue-axios

index.js Add dependencies and install axios

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios);

static I'm gonna go ahead and create a new folder mock, establish json data data.json

{
    
  "name": " Baidu ",
  "url": "http://baidu.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    
    "street": " Han guangmen ",
    "city": " Xi'an, Shaanxi ",
    "country": " China "
  },
  "links": [
    {
    
      "name": "B standing ",
      "url": "https://www.bilibili.com/"
    },
    {
    
      "name": 4399,
      "url": "https://www.4399.com/"
    },
    {
    
      "name": " Baidu ",
      "url": "https://www.baidu.com/"
    }
  ]
}

Profile.vue Add method in

export default {
    
      //  stay props Set the parameters of the route in 
      props: ['id'],
      name: "UserProfile",
      beforeRouteEnter: (to,from,next)=>{
    
      //  Can't get component instance  this  Because before the guards execute , The component instance has not been created yet 
        next(vm => {
    
          //  Before entering the route , call vm Example of getData Method to get data 
          vm.getData();
        });
      console.log(" Before entering the route ");
      next();
      }
}

methods: {
    
  //  Use axios get data 
  getData: function () {
    
    this.axios({
    
      method: 'get',
      url: 'http://localhost:8080/static/mock/data.json'
    }).then(resp=>{
    
      console.log(resp.data)}
      )
  }
}

Clicking on personal information will trigger hook function , get data

Project structure