Rumah hujung hadapan web View.js Bagaimana untuk mengkonfigurasi penghalaan dalam vue.js

Bagaimana untuk mengkonfigurasi penghalaan dalam vue.js

Sep 29, 2021 pm 05:39 PM
vue.js penghalaan

Cara mengkonfigurasi penghalaan dalam vue.js: 1. Pasang vue-router; 2. Rujukan vue-router; 3. Konfigurasikan fail penghalaan, seperti [var router = new VueRouter :" /hello",komponen...].

Bagaimana untuk mengkonfigurasi penghalaan dalam vue.js

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

Langkah-langkah untuk mengkonfigurasi penghalaan dalam vue.js adalah seperti berikut:

Pemasangan

npm install --save vue-router
Salin selepas log masuk

Rujukan

import VueRouter from 'vue-router'
Salin selepas log masuk

Konfigurasikan fail penghalaan

var router = new VueRouter({
   routes:[
    {
      path:"/hello",
      component:HelloWorld
    },
    {
      path:"/wen",
      component:HelloWen
    }
   ]
   })
    
   new Vue({
   el: '#app',
   components: { App },
   router,
   template: &#39;<App/>&#39;
   })
Salin selepas log masuk

Lokasi tempat paparan dimuatkan

Tambah

Navigasi lompat

<router-link to="/hello">helloword</router-link>(渲染出来的是a标签)
Salin selepas log masuk
Pembelajaran yang disyorkan:

latihan php

Atas ialah kandungan terperinci Bagaimana untuk mengkonfigurasi penghalaan dalam vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara melaksanakan penghalaan API dalam rangka kerja Slim Cara melaksanakan penghalaan API dalam rangka kerja Slim Aug 02, 2023 pm 05:13 PM

Cara melaksanakan penghalaan API dalam rangka kerja Slim Slim ialah rangka kerja mikro PHP ringan yang menyediakan cara mudah dan fleksibel untuk membina aplikasi web. Salah satu ciri utama ialah pelaksanaan penghalaan API, membolehkan kami memetakan permintaan yang berbeza kepada pengendali yang sepadan. Artikel ini akan memperkenalkan cara melaksanakan penghalaan API dalam rangka kerja Slim dan memberikan beberapa contoh kod. Pertama, kita perlu memasang rangka kerja Slim. Versi terbaru Slim boleh dipasang melalui Komposer. Buka terminal dan

Java Apache Camel: Membina seni bina berorientasikan perkhidmatan yang fleksibel dan cekap Java Apache Camel: Membina seni bina berorientasikan perkhidmatan yang fleksibel dan cekap Feb 19, 2024 pm 04:12 PM

Apache Camel ialah rangka kerja penyepaduan berasaskan Bas Perkhidmatan Perusahaan (ESB) yang mudah menyepadukan aplikasi, perkhidmatan dan sumber data yang berbeza untuk mengautomasikan proses perniagaan yang kompleks. ApacheCamel menggunakan konfigurasi berasaskan laluan untuk mentakrif dan mengurus proses penyepaduan dengan mudah. Ciri utama ApacheCamel termasuk: Fleksibiliti: ApacheCamel boleh disepadukan dengan mudah dengan pelbagai aplikasi, perkhidmatan dan sumber data. Ia menyokong pelbagai protokol, termasuk HTTP, JMS, SOAP, FTP, dll. Kecekapan: ApacheCamel sangat cekap, ia boleh mengendalikan sejumlah besar mesej. Ia menggunakan mekanisme pemesejan tak segerak, yang meningkatkan prestasi. Boleh dikembangkan

Cara menggunakan penghalaan dalam ThinkPHP6 Cara menggunakan penghalaan dalam ThinkPHP6 Jun 20, 2023 pm 07:54 PM

ThinkPHP6 ialah rangka kerja PHP yang berkuasa dengan fungsi penghalaan mudah yang boleh melaksanakan konfigurasi penghalaan URL dengan mudah Pada masa yang sama, ThinkPHP6 juga menyokong berbilang mod penghalaan, seperti GET, POST, PUT, DELETE, dll. Artikel ini akan memperkenalkan cara menggunakan ThinkPHP6 untuk konfigurasi penghalaan. 1. Mod penghalaan ThinkPHP6 Kaedah GET: Kaedah GET ialah satu cara untuk mendapatkan data dan sering digunakan untuk paparan halaman. Dalam ThinkPHP6, anda boleh menggunakan yang berikut

Bagaimana untuk menggunakan penghalaan untuk menyesuaikan kesan animasi penukaran halaman dalam projek Vue? Bagaimana untuk menggunakan penghalaan untuk menyesuaikan kesan animasi penukaran halaman dalam projek Vue? Jul 21, 2023 pm 02:37 PM

Bagaimana untuk menggunakan penghalaan untuk menyesuaikan kesan animasi penukaran halaman dalam projek Vue? Pengenalan: Dalam projek Vue, penghalaan adalah salah satu fungsi yang sering kami gunakan. Pertukaran antara halaman boleh dicapai melalui penghalaan, memberikan pengalaman pengguna yang baik. Untuk menjadikan penukaran halaman lebih jelas, kami boleh mencapainya dengan menyesuaikan kesan animasi. Artikel ini akan memperkenalkan cara menggunakan penghalaan untuk menyesuaikan kesan animasi penukaran halaman dalam projek Vue. Buat projek Vue Pertama, kita perlu mencipta projek Vue. Anda boleh menggunakan VueCLI untuk membina dengan cepat

Kaedah pelaksanaan dan ringkasan pengalaman mengkonfigurasi peraturan penghalaan secara fleksibel dalam PHP Kaedah pelaksanaan dan ringkasan pengalaman mengkonfigurasi peraturan penghalaan secara fleksibel dalam PHP Oct 15, 2023 pm 03:43 PM

Kaedah pelaksanaan dan ringkasan pengalaman konfigurasi fleksibel peraturan penghalaan dalam PHP Pengenalan: Dalam pembangunan Web, peraturan penghalaan adalah bahagian yang sangat penting, yang menentukan hubungan yang sepadan antara URL dan skrip PHP tertentu. Dalam kaedah pembangunan tradisional, kami biasanya mengkonfigurasi pelbagai peraturan URL dalam fail penghalaan, dan kemudian memetakan URL ke laluan skrip yang sepadan. Walau bagaimanapun, apabila kerumitan projek meningkat dan keperluan perniagaan berubah, ia akan menjadi sangat rumit dan tidak fleksibel jika setiap URL perlu dikonfigurasikan secara manual. Jadi, bagaimana untuk melaksanakan dalam PHP

Bagaimana untuk menggunakan penghalaan untuk melaksanakan lompatan halaman dalam Vue? Bagaimana untuk menggunakan penghalaan untuk melaksanakan lompatan halaman dalam Vue? Jul 21, 2023 am 08:33 AM

Bagaimana untuk menggunakan penghalaan untuk melaksanakan lompatan halaman dalam Vue? Dengan pembangunan berterusan teknologi pembangunan bahagian hadapan, Vue.js telah menjadi salah satu rangka kerja bahagian hadapan yang paling popular. Dalam pembangunan Vue, lompat halaman adalah bahagian penting. Vue menyediakan VueRouter untuk mengurus penghalaan aplikasi, dan penukaran lancar antara halaman boleh dicapai melalui penghalaan. Artikel ini akan memperkenalkan cara menggunakan penghalaan untuk melaksanakan lonjakan halaman dalam Vue, dengan contoh kod. Mula-mula, pasang pemalam vue-router dalam projek Vue.

Gunakan fungsi JavaScript untuk melaksanakan navigasi dan penghalaan halaman web Gunakan fungsi JavaScript untuk melaksanakan navigasi dan penghalaan halaman web Nov 04, 2023 am 09:46 AM

Dalam aplikasi web moden, melaksanakan navigasi dan penghalaan halaman web adalah bahagian yang sangat penting. Menggunakan fungsi JavaScript untuk melaksanakan fungsi ini boleh menjadikan aplikasi web kami lebih fleksibel, berskala dan mesra pengguna. Artikel ini akan memperkenalkan cara menggunakan fungsi JavaScript untuk melaksanakan navigasi dan penghalaan halaman web serta memberikan contoh kod khusus. Melaksanakan navigasi halaman web Untuk aplikasi web, navigasi halaman web adalah bahagian yang paling kerap dikendalikan oleh pengguna. Apabila pengguna mengklik pada halaman

Kaedah penambahan dan pemadaman dinamik laluan dalam uniapp Kaedah penambahan dan pemadaman dinamik laluan dalam uniapp Dec 17, 2023 pm 02:55 PM

Uniapp ialah rangka kerja silang berdasarkan Vue.js Ia menyokong penulisan sekali dan menjana aplikasi berbilang hujung seperti H5, program mini dan APP pada masa yang sama Ia memberi perhatian yang besar kepada prestasi dan kecekapan pembangunan proses pembangunan. Dalam Uniapp, penambahan dinamik dan pemadaman laluan adalah masalah yang sering dihadapi semasa proses pembangunan Oleh itu, artikel ini akan memperkenalkan penambahan dan pemadaman dinamik laluan dalam Uniapp dan memberikan contoh kod khusus. 1. Tambah laluan secara dinamik Mengikut keperluan sebenar, apabila halaman dimuatkan atau selepas operasi pengguna.

See all articles