Cara untuk melompat ke halaman dalam vue.js

Cara melompat halaman dalam vue.js: 1. Tetapkan tiga butang untuk ke belakang, ke hadapan dan lompat ke mana-mana halaman dalam DOM 2. Manipulasi ke belakang, ke hadapan dan lompat ke mana-mana halaman dalam pembina Di sana; adalah tiga butang pada satu halaman, hanya tulis kaedah dalam kaedah.

Persekitaran pengendalian artikel ini: sistem windows10, vue.js 2.5.2, komputer thinkpad t480.

Dalam keadaan biasa, kami akan memilih untuk menggunakan teg semasa membuat lompatan halaman dalam vue, tetapi kami tidak boleh memanipulasi secara langsung elemen DOM dalam pembina, jadi dalam kes ini, kami harus Bagaimana untuk melompat ke halaman?

Mari kita lihat pelaksanaannya!

Langkah 1:

Kami mula-mula menetapkan tiga butang dalam DOM, iaitu "Kembali", "Maju" dan "Lompat ke mana-mana halaman".

<button @click="goback">后退</button>
<button @click="forwards">前进</button>
<button @click="goto">跳转任一页</button>

Langkah seterusnya ialah memanipulasinya dalam pembina

Apabila anda memilih butang "Kembali", halaman tersebut akan melompat ke halaman sebelumnya

Apabila anda pilih butang "Maju", halaman akan melompat ke halaman seterusnya

Apabila butang "Lompat ke mana-mana halaman" dipilih, halaman akan melompat ke mana-mana halaman

Kecuali lompatan terakhir ke mana-mana halaman Selain halaman, dua butang yang tinggal perlu mempunyai jejak sejarah sebelum ia boleh melompat

Kaedah itu sudah tentu mesti ditulis dalam kaedah:

methods: {
     goback() {
       this.$router.go(-1)
     },
     forwards() {
       this.$router.go(1)
     },
     goto() {
       this.$router.push("/about")
     }
}

Pembelajaran yang disyorkan: latihan php

Atas ialah kandungan terperinci Cara untuk melompat ke halaman dalam vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!