Vue.js 在 Vue Router 路径中使用正则表达式

在本文中，我们将介绍如何在 Vue.js 的 Vue Router 中使用正则表达式。Vue Router 是 Vue.js 官方的路由管理器，用于实现前端的页面跳转和路由控制。正则表达式是一种强大的工具，可以用于匹配字符串、验证输入、提取信息等。在 Vue Router 中使用正则表达式可以帮助我们更灵活地定义路由路径，实现更复杂的路由匹配。

阅读更多：Vue.js 教程

简介

在开始使用正则表达式之前，让我们先了解一下 Vue Router 的基本概念。Vue Router 可以通过配置路由表来定义各个页面的路由路径。每个路由配置对象都可以包含一个 path 属性，用于指定路由的路径规则。在默认情况下，path 属性只能使用字符串来定义路由路径。

const routes = [
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

上述代码是一个简单的路由配置示例，其中包含了两个路由路径：/home 和 /about。这两个路径都是字符串，用于匹配对应的页面组件。但有时候，我们需要更灵活的路径匹配方式，这就需要使用正则表达式。

使用正则表达式

Vue Router 允许我们在 path 属性中使用正则表达式来定义更灵活的路由路径。我们可以通过将 path 属性的值设置为一个正则表达式来实现。

const routes = [
  {
    path: /^\/user\/([a-zA-Z0-9_\-]+)$/,
    component: User
  }
]

上述代码中的正则表达式 /^\/user\/([a-zA-Z0-9_\-]+)$/ 可以匹配以 /user/ 开头并带有一个或多个字母、数字、下划线、中划线的字符串。例如，/user/john 和 /user/jane-123 都会匹配这个正则表达式。

我们还可以在正则表达式中使用命名捕获组，以便将匹配到的部分提取出来传递给组件。

const routes = [
  {
    path: /^\/user\/(?<username>[a-zA-Z0-9_\-]+)$/,
    component: User
  }
]

上述代码中的正则表达式 /^\/user\/(?<username>[a-zA-Z0-9_\-]+)$/ 使用了命名捕获组 ?<username> 来匹配用户的用户名。例如，/user/john 中的 john 将被提取出来作为 username 属性传递给组件。

示例演示

让我们通过一个示例来演示如何在 Vue Router 中使用正则表达式。

const routes = [
  {
    path: /^\/user\/(?<username>[a-zA-Z0-9_\-]+)/,
    component: User
  }
]

const router = new VueRouter({
  routes
})

new Vue({
  router
}).mount('#app')

上述代码中定义了一个使用正则表达式的路由路径，并创建了一个 Vue 实例来使用这个路由配置。

接下来，我们可以在组件中通过 $route 对象来获取当前路由的信息，包括匹配到的参数。

<template>
  <div>
    <h1>Welcome, {{ route.params.username }}</h1>
  </div>
</template>

<script>
export default {
  mounted () {
    console.log(this.route.params.username)
  }
}
</script>