Parlons de la raison pour laquelle il y a un signe dièse dans l'adresse vue

L'utilisation du signe dièse (#) dans l'URL peut permettre un positionnement d'ancre et un saut de page, et il a également un objectif particulier dans Vue. Alors pourquoi le signe dièse apparaît-il également dans l'adresse Vue ?

1. Le signe dièse dans le routage Vue

Vue est un framework d'application monopage populaire Afin d'implémenter la commutation de routage des applications monopage, Vue introduit le routage Vue-router qui peut mapper les URL aux composants. , lorsque l'URL change, la page ne se recharge pas, seul le contenu du composant change. Dans Vue-router, le signe dièse (#) est utilisé comme séparateur du chemin de routage, et le contenu suivant représente le chemin de routage, par exemple :

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

2. Résolvez le problème du navigateur rafraîchissant la page

Lors de l'utilisation Vue-router Un problème très courant est que lorsque les utilisateurs saisissent directement le chemin de routage dans la barre d'adresse du navigateur ou actualisent la page, ils trouveront une erreur 404 ou une page vierge. En effet, l'application monopage ne comporte qu'un seul fichier HTML, le contenu de l'ensemble de l'application est rendu dynamiquement et l'actualisation du navigateur enverra l'URL au serveur. Le serveur ne peut pas reconnaître l'URL et renvoie une erreur 404. ou une page blanche.

La façon de résoudre ce problème est d'effectuer une réécriture d'URL côté serveur et de pointer toutes les requêtes d'URL vers le fichier d'entrée de l'application (index.html). De cette façon, lorsque l'utilisateur entre le chemin de routage ou actualise la page, le serveur peut renvoyer correctement le fichier d'entrée et Vue-router analysera l'URL et affichera les composants correspondants.

Cependant, si le chemin de routage est utilisé directement pour effectuer le saut, il y aura un problème car le lien sera analysé dans une requête par le navigateur et la ressource correspondante ne pourra pas être trouvée, par exemple :

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

Pour éviter cela Dans cette situation, nous pouvons utiliser Utilisez l'URL de hachage pour implémenter des sauts de routage :

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

3. Implémentez un défilement fluide des pages de saut

Dans les applications à page unique, il est souvent nécessaire d'obtenir un défilement fluide entre les pages. Dans Vue-router, vous. peut accéder à l'URL avec le signe dièse et écouter les modifications de routage. Par exemple :

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

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

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

Le code ci-dessus réalise que lorsque vous accédez à l'itinéraire #home, la page défilera en douceur vers le haut.

Résumé

Dans Vue, le signe dièse est l'un des éléments du routage Vue. Il est utilisé pour séparer et sauter les chemins de routage. Il peut également être utilisé pour résoudre le problème du rafraîchissement de la page par le navigateur et obtenir des sauts de page fluides. rouleau. Par conséquent, dans Vue, le signe dièse joue un rôle particulier.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!