Bagaimana untuk melompat ke halaman yang sama dan menukar parameter dalam vue

Vue.js ialah rangka kerja JavaScript untuk membina antara muka pengguna Ia menggunakan model MVVM dan mengikat DOM dan data dalam cara yang dipacu data. Dalam proses pembangunan aplikasi, penghalaan hadapan adalah bahagian yang sangat penting. Vue.js menyediakan pemalam vue-router, yang boleh digunakan untuk melaksanakan fungsi penghalaan bahagian hadapan.

Dalam perniagaan sebenar, kami sering menghadapi senario di mana kami perlu melompat ke halaman yang sama dan menukar parameter Contohnya, apabila pengguna menyemak imbas halaman butiran produk, mereka perlu beralih kepada produk yang berbeza pada halaman yang sama. Pada masa ini, kita boleh menggunakan fungsi "padanan penghalaan dinamik" dan "pemuatan malas" vue-router untuk mencapai matlamat ini.

1. Padanan laluan dinamik

Sistem penghalaan Vue.js membolehkan kami mentakrifkan URL dengan parameter dan menyuntik parameter ke dalam komponen apabila penghalaan dipadankan.

Mula-mula, tentukan laluan dinamik dalam router.js:

{
    path: '/goods/:id',
    name: 'Goods',
    component: () => import('@/views/Goods.vue')
}

Dalam kod di atas, kami mentakrifkan laluan bernama "Barang" dan laluannya ialah "/goods /:id" . Antaranya, ":id" bermaksud bahawa ini ialah parameter dinamik dan pengguna boleh menghantar sebarang nilai parameter semasa mengakses.

Seterusnya, dapatkan parameter penghalaan melalui $route dalam komponen Goods.vue:

<template>
  <div>
    <h1>商品详情页面</h1>
    <p>商品ID：{{ $route.params.id }}</p>
    <button @click="changeGoods">切换商品</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeGoods() {
        let goodsId = parseInt(this.$route.params.id) + 1
        this.$router.push({ name: 'Goods', params: { id: goodsId } })
    }
  }
}
</script>

Dalam kod di atas, kami mendapat parameter penghalaan melalui $route.params, dan kemudian Apabila menukar produk, tambah 1 pada nilai parameter semasa, lompat ke laluan bernama "Barang" melalui kaedah $router.push, dan lulus parameter di sana. Ini membolehkan fungsi bertukar antara produk yang berbeza pada halaman yang sama.

2. Pemuatan malas

Pemuatan malas boleh difahami sebagai pemuatan tertunda, yang bermaksud memuatkan kod yang sepadan hanya apabila diperlukan. Menggunakan pemuatan malas boleh meningkatkan kelajuan pemuatan halaman dan prestasi keseluruhan.

Dalam Vue.js, anda boleh menggunakan fungsi import() untuk melaksanakan pemuatan malas. Tukar rujukan kepada komponen dalam router.js untuk menggunakan lazy loading:

{
    path: '/goods/:id',
    name: 'Goods',
    component: () => import('@/views/Goods.vue')
}

Import('@/views/Goods.vue') di sini adalah untuk memperkenalkan Goods.vue melalui lazy loading. Apabila pengguna mengakses laluan ini, kod yang sepadan akan dimuatkan.

3. Lengkapkan kod

Akhir sekali, mari kita lihat kod lengkap:

router.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/goods/:id',
      name: 'Goods',
      component: () => import('@/views/Goods.vue')
    }
  ]
})

Goods.vue

<template>
  <div>
    <h1>商品详情页面</h1>
    <p>商品ID：{{ $route.params.id }}</p>
    <button @click="changeGoods">切换商品</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeGoods() {
        let goodsId = parseInt(this.$route.params.id) + 1
        this.$router.push({ name: 'Goods', params: { id: goodsId } })
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan pemadanan laluan dinamik dan teknologi pemuatan malas untuk merealisasikan fungsi bertukar antara produk yang berbeza pada halaman yang sama. Ini ialah senario aplikasi sistem penghalaan dalam Vue.js Bagi pelajar yang baru mula belajar Vue.js, ia sangat berbaloi untuk dipelajari dan dikuasai.

Atas ialah kandungan terperinci Bagaimana untuk melompat ke halaman yang sama dan menukar parameter dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!