current position:Home>Vue - navigation guard and rolling behavior of 13 Vue router

Vue - navigation guard and rolling behavior of 13 Vue router

2022-01-27 01:26:37 Nanchen_ forty-two

Navigation guard

 Front guard of the whole situation :beforeEach(( to , from , next))
 Rear guard of the whole situation :afterEach((to , form ,next))
 Global analysis guard :router.beforeResolve   ( Generally do not use )

You can use it.  router.beforeResolve  Sign up for a global guard . This sum  router.beforeEach  similar , The difference is that before the navigation is confirmed , At the same time, after guard and asynchronous routing components in all components are resolved , Parse guard is called .

 Route exclusive guard :beforeEnter:(to , from , next) 

as well as Guard inside the assembly

 Rendering the corresponding route of the component is  confirm  Pre invocation :beforeRouteEnter(to , form , next)

  Can't get component instance `this` Because before the guards execute , The component instance has not been created yet , If you print this Then there is undefined

 Called when the component is reused :beforeRouteUpdate(to, form, next)    // (2.2  newly added )
  Called when the navigation leaves the corresponding route of the component :beforeRouteLeave(to, from, next)

obtain title Name using the following code :

 router.beforeEach((to, from, next) => {
   console.log(to);
   console.log(from);
   next()
   document.title = to.matched[0].meta.title
 })

The guard in the navigation leaves the pop-up window :

 const answer = window.confirm(' Are you really leaving ? Uncertain stay ?');
    if (answer) {
      next()
    } else {
      next(false)
    }
  1. Navigation is triggered .
  2. Call... In a deactivated component  beforeRouteLeave  The guards .
  3. Call global  beforeEach  The guards .
  4. Called in a reused component  beforeRouteUpdate  The guards (2.2+).
  5. Call... In routing configuration  beforeEnter.
  6. Resolve asynchronous routing components .
  7. Called in the active component  beforeRouteEnter.
  8. Call global  beforeResolve  The guards (2.5+).
  9. Navigation confirmed .
  10. Call global  afterEach  hook .
  11. Trigger DOM to update .
  12. call  beforeRouteEnter  Pass it to  next  Callback function for , The created component instance will be passed in as a parameter of the callback function .

Rolling behavior

For all route navigation , Simply scroll the page to the top . 

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

Named view

  If  router-view  No name set , Then the default is  default.

router-view You can carry names in

      <router-view name="Header"></router-view>

If you want to give header If you set it as a public page, you need to use a named view

Name the view format :

stay index.js Zhongba component Switch to components

First introduced Header.vue 

import Header from '@/components/Header';
components: {
    default:About,
    Header:Header
  },

copyright notice
author[Nanchen_ forty-two],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270126351825.html

Random recommended