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.
<router-link> akan memaparkan teg href dengan atribut <a> 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. <router-link>

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 <router-link> adalah bersamaan dengan memanggil <router-link :to="...">: router.push(...)

Deklaratif

Programmatik

声明式	编程式
<router-link :to="...">	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

声明式	编程式
<router-link :to="..." replace>	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!