Vue3.0学习笔记 五

---

前言

具体详细内容，请看：https://next.router.vuejs.org/guide/essentials/route-matching-syntax.html#custom-regexp-in-params

1、路由正则与重复参数

1、参数中的自定义正则表达式

在定义类似的参数时:userId，我们在内部使用以下regexp ([^/]+)（至少一个不是斜杠的字符/）从URL中提取参数。除非需要根据参数内容区分两条路线，否则此方法效果很好。假设两条路由/:orderId和/:productName都匹配完全相同的URL，因此我们需要一种区分它们的方法。最简单的方法是将静态部分添加到区分它们的路径中：

const routes = [
  // matches /o/3549
  {
    path: '/o/:orderId' },
  // matches /p/books
  {
    path: '/p/:productName' },
]

但是在某些情况下，我们不想添加该静态部分/o/ p。但是，orderId总是数字，而productName可以是任何数字，因此我们可以在括号中为参数指定自定义正则表达式：

const routes = [
  // /:orderId -> matches only numbers
  {
    path: '/:orderId(\\d+)' },
  // /:productName -> matches anything else
  {
    path: '/:productName' },
]

确保像实际将反斜杠字符传递给JavaScript中的字符串一样，转义反斜杠\ \d。

2、可重复的参数

如果您需要将路由与多个部分（例如）进行匹配/first/second/third，则可以使用*（0或更多）和+（1或更多）将参数标记为可重复：

const routes = [
  // /:chapters -> matches /one, /one/two, /one/two/three, etc
  {
    path: '/:chapters+' },
  // /:chapters -> matches /, /one, /one/two, /one/two/three, etc
  {
    path: '/:chapters*' },
]

这将为您提供一个参数数组而不是字符串，并且还要求您在使用命名路由时传递一个数组：

// given { path: '/:chapters*', name: 'chapters' },
router.resolve({
    name: 'chapters', params: {
    chapters: [] } }).href
// produces /
router.resolve({
    name: 'chapters', params: {
    chapters: ['a', 'b'] } }).href
// produces /a/b

// given { path: '/:chapters+', name: 'chapters' },
router.resolve({
    name: 'chapters', params: {
    chapters: [] } }).href
// throws an Error because `chapters` is empty

这些也可以与自定义Regexp结合使用，方法是在右括号后面添加它们：

const routes = [
  // only match numbers
  {
    path: '/:chapters(\\d+)+' },
  {
    path: '/:chapters(\\d+)*' },
]

3、可选参数

您还可以使用?修饰符将参数标记为可选参数：

const routes = [
  // will match /users and /users/posva
  {
    path: '/users/:userId?' },
  // will match /users and /users/42
  {
    path: '/users/:userId(\\d+)?' },
]

请注意，*还将参数标记为可选，但是不能重复

案例：
App.vue

<template>
  <div>
    <p>
      <router-link to="/">Go to 主页</router-link>
      <br>
      <router-link to="/article">Go to article</router-link>
       <br>
      <router-link to="/article/132">Go to article/132</router-link>
       <br>
      <router-link to="/films">Go to films</router-link>
       <br>
      <router-link to="/films/132">Go to films/132</router-link>
       <br>
      <router-link to="/films/132/132">Go to films/132/132</router-link>
    </p>
    <router-view></router-view>
  </div>
</template>
 
<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
   
  name: 'App',
  components: {
   
    HelloWorld
  }
}
</script>

index.js

import {
   createRouter,createWebHashHistory} from 'vue-router'
import Home from '../components/Home.vue'
import NotFound from '../components/NotFound.vue'
import Article from '../components/Article.vue'
import Films from '../components/Films.vue'

// 1. Define route components.
// These can be imported from other files
// const Home = { template: '<div>Home</div>' }
// const About = { template: '<div>About</div>' }

// 2. Define some routes
// Each route should map to a component.
// We'll talk about nested routes later.
const routes = [
  {
    path: '/', component: Home },
  {
    path: '/about', component: About },

  //当输入的路径不符合要求时跳转到此页面
  {
   
    path:"/:path(.*)",
    component:NotFound
  },
  //article页 后面的id只能是数字
  {
   
    path:"/article/:id(\\d+)",
    component:Article
  },
  {
   
    // +是至少会有1个参数
    // *是可有可没有，也可以任意多个
    // ？是有，或者没有，不可以重复
    path:"/films/:id?",
    component:Films
  }
]

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = createRouter({
   
  // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
  history: createWebHashHistory(),
  routes, // short for `routes: routes`
})

export default router;

Article.vue

<template>
    <div>
        <h1>Article页{
   {
   $route.params.id}}</h1>
    </div>
</template>

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

Films.vue

<template>
    <div>
        <h1>Films页{
   {
   $route.params.id}}</h1>
    </div>
</template>

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

结果：
当依次点击跳转，结果为

当index.js中此代码为：

{
   
// ？是有，或者没有，不可以重复
path:"/films/:id?",
    component:Films
    }

当index.js中此代码为：

{
   
// *是可有可没有，也可以任意多个
path:"/films/:id*",
    component:Films
    }

当index.js中此代码为：

{
   
// +是至少会有1个参数
path:"/films/:id+",
    component:Films
    }