Mari kita bincangkan mengapa terdapat tanda paun dalam alamat vue

Menggunakan tanda paun (#) dalam URL boleh mencapai kedudukan sauh dan lonjakan halaman, dan ia juga mempunyai tujuan khas dalam Vue Jadi mengapa tanda paun juga muncul dalam alamat Vue?

1. Tanda paun dalam penghalaan Vue

Vue ialah rangka kerja aplikasi satu halaman yang popular Untuk merealisasikan peralihan penghalaan aplikasi satu halaman, Vue memperkenalkan penghalaan Vue -penghala boleh memetakan URL kepada komponen Apabila URL berubah, halaman tidak akan dimuatkan semula, hanya kandungan komponen yang berubah. Dalam Vue-router, tanda paun (#) digunakan sebagai pemisah laluan penghalaan dan kandungan berikut mewakili laluan penghalaan, contohnya:

http://www.example.com/#/home

2. Selesaikan masalah menyegarkan penyemak imbas halaman

Apabila menggunakan Vue-router, masalah yang sangat biasa ialah apabila pengguna memasuki terus laluan penghalaan dalam bar alamat penyemak imbas atau memuat semula halaman, mereka akan menemui ralat 404 atau halaman kosong. Ini kerana aplikasi satu halaman hanya mempunyai satu fail HTML, dan kandungan keseluruhan aplikasi dipaparkan secara dinamik, dan penyegaran semula penyemak imbas akan menghantar URL ke pelayan Pelayan tidak dapat mengecam URL dan mengembalikan ralat 404 atau halaman kosong.

Cara untuk menyelesaikan masalah ini ialah dengan melakukan penulisan semula URL pada bahagian pelayan dan halakan semua permintaan URL ke fail kemasukan aplikasi (index.html). Dengan cara ini, apabila pengguna memasuki laluan penghalaan atau menyegarkan halaman, pelayan boleh mengembalikan fail masuk dengan betul, dan Vue-router akan menghuraikan URL dan memaparkan komponen yang sepadan.

Walau bagaimanapun, jika anda menggunakan laluan penghalaan secara langsung untuk melengkapkan lompatan, akan ada masalah apabila pautan dihuraikan ke dalam permintaan oleh penyemak imbas, dan sumber yang sepadan tidak dapat ditemui, contohnya:

<a href="/home">首页</a>

Untuk mengelakkan situasi ini, kita boleh menggunakan URL dengan tanda cincang untuk melaksanakan lompatan laluan:

<router-link to="#/home">首页</router-link>

3. Laksanakan tatal lancar halaman lompat

dalam aplikasi satu halaman Selalunya diperlukan untuk mencapai tatal lancar antara halaman Dalam Vue-router, ini boleh dicapai dengan melompat ke URL dengan tanda cincang dan mendengar perubahan laluan. Contohnya:

<router-link to="#/home">首页</router-link>

const vueRouter = new VueRouter({
    routes: [
        {
            path: '/home',
            name: 'home',
            component: Home
        }
    ]
});

vueRouter.afterEach(() => {
    window.scrollTo(0, 0);
});

Kod di atas menyedari bahawa apabila melompat ke laluan #home, halaman akan menatal dengan lancar ke atas.

Ringkasan

Dalam Vue, tanda paun adalah salah satu elemen dalam penghalaan Vue Ia digunakan untuk memisahkan dan melompat laluan penghalaan Ia juga boleh digunakan untuk menyelesaikan masalah menyegarkan penyemak imbas halaman. Oleh itu, dalam Vue, tanda paun mempunyai peranan yang istimewa.

Atas ialah kandungan terperinci Mari kita bincangkan mengapa terdapat tanda paun dalam alamat vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!