Vue route of Vue routing plug-in

Time:2019-11-24

Vue routing plug-in, vuer router, enables the official route management of Vue to be highly coupled with Vue

1. Use of Vue router

import Vue from 'vue'
Import router from 'Vue router' // import route component

Vue.use(Router)

new Router({
  Mode: 'history', // two modes of routing hash and history default to history mode
  routes: [
  {
   path: '/',
   name: 'home',
   component: () => import(xxx.vue)
  },
  {
   path: '/about',
   name: 'about',
   component: () => import()
  }
 ]
})

2. Route jump

    this.$router.push('/path')

    this.$router.push({name:'routername'})

Get value of route

    this.$router.push({name:'routername',query:{id:xxx}})

Route post mode value transfer

    this.$router.push({name:'routername',params:{id:xxx}})

3. Route backward

    this.$router.go(-1) 

    this.$router.back()

4. Routing progress

    this.$router.forward() 

5. Replace the current route, which will not appear in the route history

    this.$router.replace(location)

6. The object property of the current route (remember that it is a lowercase $route and there is no r)

This. $route.path current route path

This. $route.name current route name

This. $route.params.id when passing parameters in post mode, get the value of ID

This. $route.query.id get gets the value of ID when passing parameters

This. $route.hash the hash value of the current route, with#

   7.linkActiveClass

The class name of the currently active route. The default is “router link active”

  8.scrollBehavior 

When switching routes, the page scrolls to the specific bit

9. Tag tag in router link to generate specific HTML elements of tag

10. Specific rendering place of router view routing component

11. All routing hook functions (navigation first)

11.1 router.beforeeach

11.2 router.beforeresolve global resolution guard

11.3router.aftereach global rear guard

11.4 before enter route exclusive guard

Guard inside component

11.5 before route enter

11.6 before routeupdate

11.7 before route leave

/*Global front guard*/
router.beforeEach(function (to, from, next) {
 //To route to be routed
 //Route from left
 //Next goes to the next route, otherwise it will not go to the next route
 Console.log ('global front guard ')
 next()
})

/*Global analysis guard*/
router.beforeResolve((to, from, next) => {
 //To route to be routed
 //Route from left
 Console.log ('global resolution guard ')
 next()
})

/*Global rear guard*/
router.afterEach((to, from) => {
 //To route to be routed
 //Route from left
 Console. Log ('global post guard ')
})
/*Component exclusive guard*/
   beforeEnter(to, from, next) {
    Console.log ('exclusive guard in component ')
    next()
   }
beforeRouteEnter(to, from, next) {
  Console. Log ('guard in component enters')
  next()
 },
 beforeRouteUpdate(to, from, next) {
  Console. Log ('guard update in component ')
  next()
 },
 beforeRouteLeave(to, from, next) {
  Console. Log ('before guard in component leaves')
  next()
 }

Order of execution,

1. The guard in the front assembly leaves

2. Global front guard

3. Route exclusive guard

4. Guard access in the assembly

5. Global analysis guard

6. Global rear guard

Or when refreshing components (/ about jumps to / about? Id = 1111)

1. Global front guard

2. Guard update in components

3. Global analysis guard

4. Global rear guard

summary

The above is the example code of Vue route introduced by Xiaobian to you. It’s very good. It has certain reference value. Please refer to it if you need!