Vue dan Vue-Router: Bagaimana untuk menggunakan maklumat penghalaan dalam komponen?

Vue dan Vue-Router: Bagaimana untuk menggunakan maklumat penghalaan dalam komponen?

Pengenalan:
Semasa proses pembangunan Vue.js, selalunya diperlukan untuk mendapatkan dan menggunakan maklumat penghalaan dalam komponen, seperti mendapatkan parameter URL semasa, melompat antara halaman yang berbeza, dsb. Vue.js menyediakan pemalam Vue-Router untuk melaksanakan fungsi penghalaan bahagian hadapan Artikel ini akan memperkenalkan cara menggunakan Vue-Router dalam komponen untuk mendapatkan dan menggunakan maklumat penghalaan.

Pengenalan kepada Vue-Router:
Vue-Router ialah pemalam pengurusan penghalaan yang disediakan secara rasmi oleh Vue.js Ia boleh melaksanakan fungsi penghalaan bahagian hadapan dan membolehkan aplikasi satu halaman mempunyai alamat URL dan ciri penukaran halaman yang sama. sebagai aplikasi berbilang halaman tradisional. Vue-Router menggunakan komponen seperti paparan penghala dan pautan penghala untuk memaparkan kandungan halaman dan mengendalikan lonjakan halaman.

Dalam Vue-Router, maklumat penghalaan disimpan dalam objek $router Anda boleh mendapatkan maklumat penghalaan semasa melalui objek $router, termasuk laluan penghalaan semasa, parameter, pertanyaan, dsb.

Langkah untuk menggunakan maklumat penghalaan dalam komponen:

1. Import Vue dan Vue-Router:
   Pertama, anda perlu memastikan bahawa Vue dan Vue-Router dipasang dan mengimport pakej Vue dan Vue-Router.

   import Vue from 'vue';
   import VueRouter from 'vue-router';
   
   Vue.use(VueRouter);

2. Konfigurasikan penghalaan:
   Dalam Vue-Router, anda perlu menentukan jadual penghalaan, termasuk komponen dan laluan yang sepadan dengan setiap laluan. Jadual penghalaan boleh ditakrifkan dalam bentuk tatasusunan atau objek.

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = new VueRouter({
  routes
});

Dalam kod di atas, dua laluan ditakrifkan: '/' sepadan dengan komponen Laman Utama dan '/about' sepadan dengan komponen Perihal.

3. Gunakan objek $router dalam komponen Vue:
   Dalam komponen Vue, anda boleh mengakses objek $router melalui ini.$router untuk mendapatkan dan menggunakan maklumat penghalaan.

Sebagai contoh, anda boleh mendapatkan laluan penghalaan semasa melalui ini.$router.path, dapatkan parameter penghalaan semasa melalui ini.$router.params,
dapatkan parameter pertanyaan penghalaan semasa melalui ini.$router.query.

export default {
  mounted() {
    console.log('当前路由路径：', this.$router.path);
    console.log('当前路由参数：', this.$route.params);
    console.log('当前路由查询参数：', this.$route.query);
  }
}

Dalam kod di atas, fungsi cangkuk yang dipasang digunakan untuk mengeluarkan laluan penghalaan semasa, parameter dan parameter pertanyaan selepas komponen dimuatkan.

4. Gunakan pautan penghala dalam templat untuk melompat ke halaman:
   Vue-Router menyediakan komponen pautan penghala, anda boleh menggunakan pautan dalam templat untuk melompat ke halaman.

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

Dalam kod di atas, laluan lompat ditentukan melalui atribut kepada Mengklik pautan Laman Utama dan Perihal boleh melompat ke halaman yang sepadan.

Ringkasan:
Dengan Vue-Router, menggunakan maklumat penghalaan dalam komponen Vue adalah sangat mudah. Mula-mula, import Vue dan Vue-Router, konfigurasikan jadual penghalaan, kemudian dapatkan maklumat penghalaan melalui objek ini.$router, dan gunakan komponen pautan penghala dalam templat untuk melaksanakan lompatan halaman. Melalui langkah ini, kami boleh menggunakan maklumat penghalaan dengan lebih mudah dalam projek Vue.js untuk melaksanakan fungsi seperti pemindahan data dan penukaran halaman antara halaman yang berbeza.

Saya harap artikel ini akan membantu anda memahami cara menggunakan Vue-Router untuk mendapatkan dan menggunakan maklumat penghalaan dalam komponen.

Atas ialah kandungan terperinci Vue dan Vue-Router: Bagaimana untuk menggunakan maklumat penghalaan dalam komponen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!