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.

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,

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