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)
    }

Complete navigation analysis process

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
  },