Enrutamiento dinámico del enrutador Vue y coincidencia de enrutamiento

El enrutamiento dinámico del enrutador Vue coincide con el enrutamiento, el enrutamiento usa sintaxis regular

1. Enrutamiento dinámico

1.1 Crear un nuevo archivo user.vue

En la carpeta de vistas, cree un nuevo archivo user.vue

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

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

Usar para usarRuta

1.2 Introducir el archivo user.vue en el router index.js

Donde la ruta se escribe como: '/usuario/:id'

1.3 Agregar entrada en App.vue

El camino obtendrá 123

imprimirá

2. Coincidencia de ruta

2.1 404No encontrado

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

Cuando pathMatch no coincida, saltará automáticamente a la página No encontrado
Use el método normal para hacer coincidir cualquier página 404

2.2 Sintaxis regular para otras rutas

• ruta: "/usuario/:id(\d+)" //El parámetro debe ser un número
• ruta: "/usuario/:id+" //Hay varios parámetros +
• ruta: "/usuario/:id*" //los parámetros son opcionales*, los parámetros se pueden superponer repetidamente
• ruta: "/usuario/:id?" // ¿parámetro opcional?, los parámetros no se pueden superponer repetidamente