Bagaimana untuk menulis parameter ts dalam laluan vue3

Vue3 ialah salah satu rangka kerja bahagian hadapan yang popular pada masa ini, dengan komponenisasi dan responsif yang sangat baik. vue-router ialah pemalam penghalaan yang disediakan secara rasmi oleh Vue, yang membolehkan kami melompat antara halaman dalam aplikasi bahagian hadapan dan melaksanakan aplikasi satu halaman (SPA).

Semasa pembangunan, kadangkala kita perlu menghantar parameter antara laluan, seperti melompat dari satu halaman ke halaman lain dan memaparkan data yang sepadan. Seterusnya, kami akan memperkenalkan cara menghantar parameter melalui vue-router dalam Vue3, digabungkan dengan pemeriksaan jenis TypeScript, untuk mengelakkan pengecualian masa jalan yang disebabkan oleh lulus parameter yang salah.

Pasang vue-router

Sebelum menggunakan vue-router untuk melaksanakan lompat laluan, kita perlu memasang vue-router terlebih dahulu:

npm install vue-router@next

Tentukan laluan

Seterusnya, kita perlu menentukan laluan dalam aplikasi Vue. Dalam Vue3, laluan ditakrifkan secara berbeza daripada dalam Vue2. Berikut ialah kod sampel mudah:

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    props: true
  },
  {
    path: '/page/:id',
    name: 'Page',
    component: Page,
    props: true
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

di mana, createRouter dan createWebHistory ialah kaedah kilang yang disediakan oleh Vue3 untuk mencipta kejadian penghalaan dan pengurus sejarah.

Apabila menentukan laluan, kita perlu menentukan laluan, nama laluan dan komponen. Selain itu, kita juga boleh melepasi parameter laluan sebagai atribut komponen dengan menetapkan props: true untuk memudahkan komponen menerima parameter.

Lompatan laluan

Berikut ialah kod contoh lompat laluan asas:

import router from '@/router';

router.push({ name: 'Page', params: { id: '1' } });

Dalam kod di atas, kami menggunakan kaedah router.push untuk melakukan lompatan laluan. Antaranya, name ialah nama laluan lompat, params ialah objek parameter yang dilalui, dan kunci dalamannya sepadan dengan nama parameter dalam laluan penghalaan.

Terima parameter

Akhir sekali, kita perlu menerima parameter dalam komponen halaman lompat dan melakukan semakan jenis.

Terdapat dua cara untuk lulus parameter. Satu melalui props, satu lagi melalui $route. Mari kita lihat pelaksanaan khusus kedua-dua kaedah lulus parameter ini masing-masing:

Melalui parameter melalui prop

Apabila menentukan laluan, kita boleh menggunakan pilihan props untuk menggunakan parameter penghalaan sebagai atribut komponen. Berikut ialah contoh kod:

// 路由定义
{
  path: '/page/:id',
  name: 'Page',
  component: Page,
  props: true
}

Dalam komponen, kami boleh mengisytiharkan sifat ini secara langsung dan melakukan semakan jenis melalui TypeScript. Berikut ialah contoh kod:

<script lang="ts">
interface Props {
  id: string;
}

export default {
  props: {
    id: {
      type: String,
      required: true
    }
  },
  setup(props: Props) {
    /* ... */
  }
};
</script>

Di sini kami menggunakan fungsi setup yang baru diperkenalkan dalam Vue3 untuk menggantikan data, computed, methods dan fungsi cangkuk lain dalam Vue2. Melalui objek props, kita boleh mendapatkan parameter yang diluluskan dan melakukan semakan jenis.

Melalui parameter melalui $route

Cara lain untuk lulus parameter ialah melalui $route. Dengan cara ini, kita boleh mendapatkan parameter penghalaan melalui objek $route.params. Berikut ialah kod sampel:

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const id = $route.params.id;
    /* ... */
  }
});
</script>

Perlu diambil perhatian bahawa apabila menggunakan $route, kita perlu mengimport jenis berkaitan penghalaan seperti RouteLocationNormalized dan RouteParams melalui jenis statik, dan taip semak parameter .

import { defineComponent } from 'vue';
import { RouteLocationNormalized, RouteParams } from 'vue-router';

export default defineComponent({
  setup() {
    const route = $route as RouteLocationNormalized & { params: RouteParams };
    const id = route.params.id;
    /* ... */
  }
});

Ringkasan

Menggunakan vue-router untuk lulus parameter penghalaan dan melakukan semakan jenis di bawah Vue3 ialah cara yang lebih selamat dan boleh dipercayai. Melalui pemeriksaan jenis TypeScript, kami boleh mengelakkan pengecualian masa jalan yang disebabkan oleh hantaran parameter yang salah dan meningkatkan kestabilan kod. Pada masa yang sama, ciri baharu seperti fungsi setup dan kaedah kilang yang diperkenalkan oleh Vue3 juga memudahkan kami mengurus dan memproses penghalaan semasa proses pembangunan.

Atas ialah kandungan terperinci Bagaimana untuk menulis parameter ts dalam laluan vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!