Vue router dynamic routing matches routing, routing uses regular syntax
1. Dynamic routing
1.1 Create a new user.vue file
In the views folder, create a new user.vue file
<template>
<div>用户{
{
id}}</div>
</template>
<script setup>
import {
useRoute } from 'vue-router';
const id=useRoute().params.id
console.log("动态路由参数：",id)
</script>
Use to useRoute
1.2 Introduce the user.vue file in the router index.js
Where path is written as: '/user/:id'
1.3 Add entry in App.vue
The path will get 123
will print out
2. Route matching
2.1 404Not Found
{
path: '/:pathMatch(.*)', component: NotFound }
Where pathMatch fails to match, it will automatically jump to the Notfound page
Use the regular method to match any 404 page
2.2 Regular syntax for other routes
- path: "/user/:id(\d+)" //The parameter must be a number
- path: "/user/:id+" //There are multiple parameters +
- path: "/user/:id*" //parameters are optional*, parameters can be superimposed repeatedly
- path: "/user/:id?" // parameter optional?, parameters cannot be superimposed repeatedly