Rumah > hujung hadapan web > View.js > teks badan

Bagaimanakah peraturan penamaan laluan dalam Penghala Vue ditakrifkan?

王林
Lepaskan: 2023-07-21 20:51:20
asal
2250 orang telah melayarinya

Vue Router ialah pengurus penghalaan yang disediakan secara rasmi oleh Vue.js, yang menyediakan fungsi penghalaan yang berkuasa untuk aplikasi satu halaman. Dalam Penghala Vue, laluan ditakrifkan melalui jadual penghalaan, dan setiap laluan dalam jadual penghalaan boleh mentakrifkan nama unik, iaitu, penamaan laluan. Artikel ini akan memperkenalkan peraturan penamaan penghalaan dalam Penghala Vue dan cara menggunakannya.

Dalam Penghala Vue, anda boleh menggunakan atribut name untuk mentakrifkan nama unik bagi setiap laluan. Dengan menetapkan nama pada laluan, anda boleh dengan mudah merujuk dan melompat ke laluan yang sepadan dalam kod. Berikut ialah contoh menggunakan penamaan laluan: name属性为每个路由定义一个唯一的名称。通过给路由设置名称,可以方便地在代码中引用和跳转到对应的路由。下面是一个使用了路由命名的示例:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home', // 设置路由名称为home
      component: Home
    },
    {
      path: '/about',
      name: 'about', // 设置路由名称为about
      component: About
    }
  ]
})

export default router
Salin selepas log masuk

在上面的代码中,我们分别为HomeAbout两个路由组件设置了路由名称。homeabout分别对应了//about这两个路径。

在代码中引用和跳转到对应的路由时,可以使用this.$router.push({ name: 'home' })来跳转到home这个路由,使用this.$router.push({ name: 'about' })来跳转到about这个路由。

除了在代码中跳转路由外,路由名称还可以在路由链接中使用。下面是一个使用了路由名称的链接示例:

<router-link :to="{ name: 'home' }">Home</router-link>
<router-link :to="{ name: 'about' }">About</router-link>
Salin selepas log masuk

在上面的代码中,我们使用了<router-link>组件来生成一个路由链接。通过设置to属性为{ name: 'home' }{ name: 'about' },就可以生成指向homeaboutrrreee

Dalam kod di atas, kami menetapkan nama laluan untuk dua komponen penghalaan Rumah dan Perihal masing-masing. home dan about sepadan dengan dua laluan / dan /about masing-masing.

Apabila merujuk dan melompat ke laluan yang sepadan dalam kod, anda boleh menggunakan this.$router.push({ name: 'home' }) untuk melompat ke home Untuk laluan ini, gunakan this.$router.push({ name: 'about' }) untuk melompat ke laluan about.

Selain melompat laluan dalam kod, nama laluan juga boleh digunakan dalam pautan laluan. Berikut ialah contoh pautan menggunakan nama laluan: 🎜rrreee🎜Dalam kod di atas, kami menggunakan komponen <router-link> untuk menjana pautan laluan. Dengan menetapkan atribut to kepada { name: 'home' } dan { name: 'about' }, anda boleh menjana pautan ke home Pautan ke dua laluan dan about. 🎜🎜Ringkasnya, peraturan penamaan laluan dalam Penghala Vue dilaksanakan dengan menetapkan nama unik untuk setiap laluan. Dengan menetapkan nama untuk laluan, kami boleh dengan mudah merujuk dan melompat ke laluan yang sepadan dalam kod, dan kami juga boleh menggunakan nama laluan untuk navigasi dalam pautan laluan. 🎜🎜Saya harap artikel ini akan membantu anda memahami peraturan penamaan penghalaan dalam Penghala Vue. Jika anda ingin mengetahui lebih lanjut tentang fungsi dan penggunaan Penghala Vue, anda boleh menyemak dokumentasi rasmi dan sumber pembelajaran yang berkaitan. Saya doakan anda berjaya dalam membangunkan aplikasi satu halaman yang berkuasa apabila menggunakan Penghala Vue! 🎜

Atas ialah kandungan terperinci Bagaimanakah peraturan penamaan laluan dalam Penghala Vue ditakrifkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan