Penghala Vue cuba memadankan laluan menggunakan param sebagai nama.

Question

Saya cuba menggunakan parameter dalam laluan saya dan telah mencipta laluan berikut.

export const ConsumerRoutes = [
  {
    laluan: '/' + import.meta.env.VITE_MODULE_ADMIN_NAME + '/consumers',
    meta: {
      requireAuth: benar,
      adminLayout: benar,
      modul: 'admin',
      ikon: UserCircleIcon,
      nav: 'Pengguna'
    },
    kanak-kanak: [
      {
        jalan: '',
        nama: 'Pengguna',
        komponen: () => import('../../views/admin/Consumer.vue'),
      },
      {
        laluan: ':id',
        nama: 'Butiran Pengguna',
        komponen: () => import('../../views/admin/ConsumerDetails.vue'),
      }
    ],
  },

  // {
  // laluan: '/' + import.meta.env.VITE_MODULE_ADMIN_NAME + '/consumers/:id',
  // meta: {
  // requireAuth: benar,
  // adminLayout: benar,
  // modul: 'admin',
  // excludeFromNav: benar
  // },
  // kanak-kanak: [
  // {
  // laluan: '',
  // nama: 'Butiran Pengguna',
  // komponen: () => import('../../views/admin/ConsumerDetails.vue'),
  // }
  // ]
  // }
];

Apabila saya cuba memasukkan /1 dalam URL, saya boleh menavigasi ke pengguna, tetapi saya mendapat ralat berikut.

vue-router.mjs:810 Ralat tidak tertangkap (dalam janji): Tiada padanan untuk
 {"name":"1","params":{}}

Walau bagaimanapun, jika saya menggunakan console.log masuk fungsi afterEach untuk mencetak laluan sasaran saya, saya mendapat objek laluan berikut.

Jadi ia tahu laluan mana yang saya akan pergi, tetapi atas sebab tertentu ia menggunakan '1' cuba mencari laluan bernama '1'. Jika saya menukar nama laluan saya kepada 1 ia boleh dimuatkan dengan baik.

Saya telah cuba memisahkan laluan saya daripada laluan kanak-kanak kepada laluan bebas tetapi itu tidak mengubah apa-apa.

---

Masalah telah diselesaikan dan tiada kaitan dengan laluan yang saya tetapkan.

Answer 1

Masalah yang anda alami mungkin kerana Penghala Vue cuba memadankan berdasarkan nama laluan dan bukannya laluan.

Anda cuba menavigasi ke /consumers/1, menjangkakan "1" sebagai parameter laluan (:id). Tetapi Vue Router mentafsirkan "1" sebagai nama laluan, maka mesej ralat yang anda lihat.

Pastikan anda menavigasi menggunakan laluan laluan dan bukan nama laluan. Dalam cangkuk afterEach anda, gunakan kod berikut:

router.afterEach((to, from) => {
  router.push(to.path);
});

Apabila menavigasi secara manual, gunakan laluan ('/consumers/1'), bukan nama. Jika anda masih menghadapi masalah, ia mungkin disebabkan oleh bahagian lain kod anda.

Berikut ialah contoh kod untuk menavigasi ke laluan mengikut nama:

router.push({ name: 'Consumer Details', params: { id: 1 } })

Selain itu, berikut ialah contoh kod untuk menavigasi ke laluan melalui laluan:

router.push('/consumers/1')

Sepatutnya berguna