Bagaimana untuk menyelesaikan masalah "Ralat: Dihalakan semula apabila pergi dari "xxx" ke "yyy" melalui pengawal navigasi" apabila menggunakan vue-router dalam aplikasi Vue?

Bagaimana untuk menyelesaikan masalah "Ralat: Dihalakan semula apabila pergi dari "xxx" ke "yyy" melalui pengawal navigasi" apabila menggunakan vue-router dalam aplikasi Vue?

Vue ialah rangka kerja JavaScript popular yang memudahkan pembinaan aplikasi web interaktif. Penghala Vue ialah penghala rasmi Vue Ia adalah pemalam teras yang mengendalikan navigasi dan penghalaan dalam aplikasi Vue. Walau bagaimanapun, apabila menggunakan vue-router, ralat biasa kadangkala berlaku: "Ralat: Dihalakan semula apabila pergi dari "xxx" ke "yyy" melalui pengawal navigasi. Jadi, artikel ini akan memperkenalkan punca dan penyelesaian ralat ini.

Punca ralat

Apabila menggunakan vue-router, kami sering menggunakan pengawal penghalaan untuk mengawal kebenaran pengguna apabila mengakses halaman tertentu. Sebagai contoh, kita boleh menggunakan pengawal laluan untuk mengubah hala pengguna ke halaman log masuk apabila mereka tidak log masuk. Walau bagaimanapun, apabila menggunakan pengawal laluan, ralat berikut kadangkala berlaku:

Error: Redirected when going from "xxx" to "yyy" via a navigation guard

Sebab ralat ini adalah kerana kami menggunakan kaedah beforeEach() untuk mengubah hala pengguna, tetapi kami tidak mengendalikan situasi "ubah hala" dengan betul. Jika kami mengubah hala pengguna, maka kami mesti memberitahu Vue Router mengetahui fakta ini, jika tidak, Vue Router akan berfikir bahawa kami tidak mengubah hala.

Penyelesaian

Untuk menyelesaikan ralat ini, kita perlu membuat pengubahsuaian yang sesuai dengan cara pengawal laluan digunakan. Berikut adalah beberapa penyelesaian yang mungkin:

1. Gunakan seterusnya(salah)

Apabila kita menggunakan seterusnya(salah), ini bermakna kita ingin menamatkan laluan tanpa sebarang ubah hala. Jadi, jika kita menggunakan next(false) dalam beforeEach(), maka kita boleh mengelakkan ralat ini.

Sebagai contoh, kita boleh mengubah suai pengawal laluan seperti ini:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login') //重定向到登录页
  } else {
    next(false) //终止路由
  }
})

2. Gunakan seterusnya({ laluan: '/login' })

Apabila kita menggunakan seterusnya({ laluan: '/login' }), ini bermakna kami mahu Ubah hala pengguna ke laluan yang ditentukan (/log masuk dalam kes ini). Dengan cara ini, Penghala Vue tahu bahawa kami mengubah hala.

Sebagai contoh, kita boleh mengubah suai pengawal laluan seperti ini:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ path: '/login' }) //重定向到登录页
  } else {
    next() //正常路由
  }
})

3. Gunakan seterusnya({ nama: 'log masuk' })

Apabila kita menggunakan seterusnya({ nama: 'log masuk' }), ini bermakna kita mahu pengguna Ubah hala ke laluan dengan nama yang ditentukan. Nama ini ialah nama laluan yang ditakrifkan dalam Penghala Vue.

Sebagai contoh, kita boleh menentukan laluan dengan nama "log masuk" seperti ini:

const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  }
]

Kemudian, kita boleh mengubah suai pengawal laluan seperti ini:

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'login' }) //重定向到具有名称“login”的路由
  } else {
    next() //正常路由
  }
})

Ringkasan

Apabila menggunakan Vue Router, kita perlu memahami cara untuk gunakan pengawal laluan, Ini membantu kami mengawal hak akses pengguna dan mengubah hala pengguna ke halaman tertentu. Walau bagaimanapun, apabila menggunakan pengawal laluan, ralat "Ralat: Diubah hala apabila pergi dari "xxx" ke "yyy" melalui pengawal navigasi" kadangkala berlaku. Pada masa ini, kita perlu membuat pengubahsuaian yang sesuai dengan cara pengawal penghalaan digunakan, seperti menggunakan next(false), next({ path: '/login' }), atau next({ name: 'login' }) , dsb., jadi Ralat ini boleh dielakkan.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah "Ralat: Dihalakan semula apabila pergi dari "xxx" ke "yyy" melalui pengawal navigasi" apabila menggunakan vue-router dalam aplikasi Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!