Analisis mendalam tentang cangkuk navigasi dalam Vue-Router

Artikel ini akan membawa anda melalui sesuatu yang mesti ditanya dalam temu bual --- cangkuk navigasi dalam Vue-Router saya harap ia akan membantu anda!

Pengawal Navigasi

"Navigasi" menunjukkan bahawa laluan sedang berubah.

vue-router Pengawal navigasi yang disediakan oleh digunakan terutamanya untuk menjaga navigasi dengan melompat atau membatalkan. Terdapat berbilang peluang untuk membina proses navigasi laluan: secara global, eksklusif untuk satu laluan, atau pada peringkat komponen. [Cadangan berkaitan: "tutorial vue.js"]

1 pengawal hadapan global----router.beforeEach

router.beforeEach Daftar pengawal hadapan global:

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  //  to:要去哪个页面
  //  from:从哪里来
  //  next:它是一个函数。
  //     如果直接放行 next()
  //     如果要跳到其它页 next(其它页)
})

Kod contoh:

router.beforeEach(async(to, from, next) => {
  NProgress.start() // 开启进度条
  const token = store.state.user.token
  const userId = store.state.user.userInfo.userId
  console.log(token, to.path, from.path)
  if (token) {
    if (to.path === '/login') { // 有 token还要去login
      next('/')
      NProgress.done() // 关闭进度条
    } else { // 有 token，去其他页面，放行
      if (!userId) {
        await store.dispatch('user/getUserInfo')
      }
      next()
    }
  } else {
    if (to.path === '/login') { // 没有token，去login，放行
      next()
    } else {
      next('/login') // 没有token，去其他页面
      NProgress.done()
    }
  }
})

Ringkasan

• router.beforeEach (panggil balik (tiga parameter))
• Dalam fungsi pengawal navigasi, pastikan untuk memanggil next( )
• ke.path: to ialah A objek penghalaan, laluan mewakili laluan, yang merupakan salah satu atributnya

2.

Daftar posthook global:

Anda juga boleh mendaftar posthook global, bagaimanapun, tidak seperti pengawal, cangkuk ini tidak akan menerima fungsi router.afterEach dan tidak akan mengubah navigasi itu sendiri :

next3. Pengawal resolusi global----router.beforeResolve

router.afterEach((to, from) => {
  // ...
})

Dalam 2.5.0 anda boleh menggunakan untuk mendaftarkan pengawal global. Ini serupa dengan , perbezaannya ialah sebelum navigasi disahkan,

dikawal dalam semua komponen pada masa yang sama dan selepas komponen penghalaan tak segerak dihuraikan

, pengawal parsing dipanggil. router.beforeResolverouter.beforeEach4 Pengawal eksklusif laluan

Anda boleh menentukan terus pengawal dalam konfigurasi penghalaan:

beforeEnter 5. . Pengawal dalam komponen

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

• (baru dalam 2.2)beforeRouteEnter
• beforeRouteUpdate
• beforeRouteLeave
Selesaikan proses penghuraian navigasi

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

Navigasi dicetuskan.

• Panggil

  pengawal dalam komponen yang dinyahaktifkan.

• beforeRouteLeavePanggil pengawal

  global.

• beforeEachPanggil

  pengadang (2.2) dalam komponen yang digunakan semula.

• beforeRouteUpdate dipanggil dalam konfigurasi penghalaan

  .

• beforeEnterSelesaikan komponen penghalaan tak segerak.

• dipanggil dalam komponen yang diaktifkan

  .

• beforeRouteEnter Memanggil

  pengawal global (2.5).

• beforeResolveNavigasi disahkan.

• Panggil cangkuk

  global.

• afterEachCetuskan kemas kini DOM.

• memanggil fungsi panggil balik yang diserahkan kepada

  dalam pengawal
, dan contoh komponen yang dibuat akan dihantar masuk sebagai parameter fungsi panggil balik.

• beforeRouteEnternextUntuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

  Pengenalan kepada Pengaturcaraan
! !

Atas ialah kandungan terperinci Analisis mendalam tentang cangkuk navigasi dalam Vue-Router. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!