Routage dynamique du routeur Vue et correspondance de routage

Le routage dynamique du routeur Vue correspond au routage, le routage utilise une syntaxe normale

1. Routage dynamique

1.1 Créer un nouveau fichier user.vue

Dans le dossier des vues, créez un nouveau fichier user.vue

<template>
    <div>用户{
    
    {
    
    id}}</div>
</template>

<script setup>
    import {
    
     useRoute } from 'vue-router';
    const id=useRoute().params.id
    console.log("动态路由参数：",id)
</script>

Utiliser pour utiliserRoute

1.2 Introduisez le fichier user.vue dans le routeur index.js

Où le chemin est écrit comme suit : '/user/:id'

1.3 Ajouter une entrée dans App.vue

Le chemin obtiendra 123

va imprimer

2. Correspondance d'itinéraire

2.1 404Introuvable

    {
    
     path: '/:pathMatch(.*)', component: NotFound }

Lorsque pathMatch ne correspond pas, il passera automatiquement à la page Notfound
Utilisez la méthode habituelle pour faire correspondre n'importe quelle page 404

2.2 Syntaxe régulière pour les autres routes

• path : "/user/:id(\d+)" //Le paramètre doit être un nombre
• path : "/user/:id+" //Il y a plusieurs paramètres +
• path : "/user/:id*" //les paramètres sont facultatifs*, les paramètres peuvent être superposés à plusieurs reprises
• path : "/user/:id?" // paramètre facultatif ?, les paramètres ne peuvent pas être superposés à plusieurs reprises