Analisis mendalam komponen pautan penghala Vue untuk melaksanakan navigasi laluan

Penghala Vue

Dengan Vue.js, kami telah mengarang aplikasi kami dengan komponen. Apabila menambahkan Penghala Vue, apa yang perlu kita lakukan ialah memetakan komponen kami ke laluan supaya Penghala Vue mengetahui tempat untuk memaparkannya. [Cadangan berkaitan: tutorial video vue.js]

Penggunaan Penghala Vue

Deklaratif

Gunakan pautan-penghala komponen untuk navigasi, nyatakan pautan dengan menghantar to.
b988a8fd72e5e0e42afffd18f951b277 akan memaparkan teg href dengan atribut 3499910bf9dac5ae3c52d5ede7383485 yang betul.
Contoh rasmi:

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

Daripada menggunakan teg a biasa, komponen tersuai router-link digunakan untuk membuat pautan. Ini membolehkan Vue Router menukar URL tanpa memuatkan semula halaman, mengendalikan penjanaan URL dan pengekodan.

router-view
akan memaparkan komponen yang sepadan dengan url. Anda boleh meletakkannya di mana-mana mengikut reka letak. router-view

Navigasi Programatik

Selain menggunakan

untuk mencipta teg bagi mentakrifkan pautan navigasi, kami juga boleh menggunakan kaedah contoh penghala untuk melaksanakannya dengan menulis kod. b988a8fd72e5e0e42afffd18f951b277

Untuk menavigasi ke URL lain, gunakan kaedah

. Kaedah ini akan router.pushmenambah rekod baharu pada timbunan sejarah, jadi apabila pengguna mengklik butang kembali penyemak imbas, mereka akan dikembalikan ke URL sebelumnya.

Apabila

diklik, kaedah ini akan dipanggil secara dalaman, jadi mengklik b988a8fd72e5e0e42afffd18f951b277 adalah bersamaan dengan memanggil b4ff06a8e29f70cf73397344dd44aa0f: router.push(...)

Deklaratif

Programmatik

声明式	编程式
b4ff06a8e29f70cf73397344dd44aa0f	router.push(...)

Parameter kaedah ini boleh menjadi laluan rentetan atau objek yang menerangkan alamat.

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })

Nota: Jika laluan disediakan, param akan diabaikan

// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

Ganti kedudukan semasa

Fungsi adalah serupa dengan router.push , perbezaannya ialah ia tidak akan menambah rekod baharu pada sejarah semasa navigasi

声明式	编程式
724d622929c17b18a73a795b5660163f	router.replace(...)

Anda juga boleh menambah atribut router.push terus ke routeLocation yang diserahkan kepada replace: true:

router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })

Merentas sejarah

Kaedah ini mengambil integer sebagai parameter, menunjukkan bilangan langkah ke hadapan atau ke belakang dalam tindanan sejarah, serupa dengan window.history.go(n).

// 向前移动一条记录
router.go(1)
// 相当于
router.forward()

// 返回一条记录
router.go(-1)
// 相当于
router.back()

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)

Atas ialah kandungan terperinci Analisis mendalam komponen pautan penghala Vue untuk melaksanakan navigasi laluan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!