Beberapa cara untuk melompat dalam penghalaan Vue

Dalam Vue.js, penghalaan ialah konsep yang sangat penting. Ia membolehkan kami memaparkan kandungan yang berbeza berdasarkan alamat URL yang berbeza. Dalam Vue.js, kita boleh mengakses komponen atau halaman yang berbeza melalui alamat penghalaan. Dalam artikel ini, kami akan memperkenalkan beberapa cara untuk menghalakan lompatan dalam Vue.js.

1 Gunakan komponen pautan penghala untuk melaksanakan lompat laluan

pautan penghala ialah komponen lompat laluan terbina dalam Vue.js. Ia menyediakan teg untuk mengakses pautan yang berbeza dan menghantar alamat URL ke komponen paparan penghala untuk memaparkan halaman yang sepadan. Kita boleh menggunakan komponen pautan penghala dalam templat untuk melompat antara halaman.

Berikut ialah contoh kod yang menggunakan komponen pautan penghala untuk melompat ke halaman lain:

<template>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于我们</router-link>
  </div>
</template>

Dalam kod di atas, kami menggunakan dua komponen pautan penghala. Atribut to digunakan untuk menentukan alamat penghalaan lompatan Sebagai contoh, to="/about" bermaksud untuk melompat ke halaman Perihal Kami. Apabila kami mengklik teg , Vue.js akan memadankan alamat penghalaan dan memaparkan komponen yang sepadan berdasarkan nilai atribut kepada.

2. Gunakan navigasi terprogram dalam Vue.js untuk melaksanakan lompatan laluan

Selain menggunakan komponen pautan penghala untuk lompatan laluan, Vue.js juga menyediakan kaedah Navigasi terprogram untuk melaksanakan laluan melompat. Navigasi terprogram melaksanakan lompatan penghalaan melalui kod JavaScript, yang membolehkan kami melompat terus ke halaman tertentu dalam kod.

Berikut ialah contoh kod untuk melaksanakan lompat laluan menggunakan navigasi program dalam Vue.js:

<template>
  <div>
    <button @click="goHome">首页</button>
    <button @click="goAbout">关于我们</button>
  </div>
</template>

<script>
export default {
  methods: {
    goHome() {
      this.$router.push('/');
    },
    goAbout() {
      this.$router.push('/about');
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan dua butang untuk melaksanakan lompat laluan. Apabila kami mengklik butang, hubungi kaedah goHome atau goAbout untuk melaksanakan lompatan laluan. Dalam Vue.js, kita boleh mengakses objek penghalaan melalui ini.$router dan memanggil kaedah push() untuk melaksanakan lompat laluan. Apabila kami memanggil kaedah push() dan menghantar alamat penghalaan sasaran, Vue.js akan memadankan alamat penghalaan secara automatik dan memaparkan komponen yang sepadan.

3 Gunakan kaedah router.push() untuk melaksanakan lompat laluan

Selain menggunakan kaedah $this.$router.push() untuk melaksanakan lompat laluan, Vue.js juga menyediakan kaedah router.push() untuk melakukan lompatan penghalaan. Berbanding dengan kaedah $this.$router.push(), kaedah router.push() adalah lebih langsung dan membolehkan kami mengawal tingkah laku lompat penghalaan dengan lebih halus.

Berikut ialah contoh kod yang menggunakan kaedah router.push() untuk melaksanakan lompatan laluan:

<template>
  <div>
    <button @click="goHome">首页</button>
    <button @click="goAbout">关于我们</button>
  </div>
</template>

<script>
import { Router } from 'vue-router';

export default {
  methods: {
    goHome() {
      this.$router.push('/');
    },
    goAbout() {
      const route = { path: '/about', name: 'About' };
      this.$router.push(route);
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan kaedah router.push() untuk melaksanakan melompat. Kita boleh menghantar rentetan atau objek untuk menentukan alamat penghalaan destinasi. Dalam contoh di atas, kami lulus objek untuk menentukan alamat penghalaan dan nama halaman kami.