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

导读:本篇文章讲解 vue router动态路由与路由的匹配,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

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?” //参数可有可无 ?, 参数不可以重复叠加

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/107038.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!