vue router动态路由与路由的匹配

林烈涛

于 2022-12-19 06:39:03 发布

阅读量1.2k

点赞数

分类专栏： Vue3 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/Linlietao0587/article/details/128368139

版权

Vue3 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了Vue Router如何实现动态路由，并展示了如何利用正则表达式进行路由参数的匹配。通过创建'user.vue'组件，设置'/user/:id'路由，并在App.vue中访问该路由，演示了动态路由参数的获取。同时，文章还探讨了404路由匹配和不同正则模式在路由匹配中的应用，如限制参数为数字、允许多个参数、可选参数等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue router动态路由与路由的匹配，路由使用正则语法

一、动态路由

1.1 新建一个 user.vue文件

在views文件夹，新建一个user.vue文件

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

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

在这里插入图片描述

使用到 useRoute

1.2 在路由器index.js引入user.vue文件

其中path 写成：‘/user/:id’

在这里插入图片描述

1.3 在App.vue添加入口

路径会获取 123

在这里插入图片描述

在这里插入图片描述
会打印出来

在这里插入图片描述

二、路由的匹配

2.1 404Not Found

在这里插入图片描述

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

其中pathMatch 匹配不到，会自动跳转 Notfound页面上
使用正则方式，匹配任意 404页面

在这里插入图片描述

2.2 其它路由的正则语法

path:“/user/:id(\d+)” //参数一定是数字
path:“/user/:id+” //有多个参数 +
path:“/user/:id*” //参数可有可无 *，参数可以重复叠加
path:“/user/:id?” //参数可有可无 ?, 参数不可以重复叠加