MarginLon MarginLon
首页
  • Web

    • Web基础
    • Web布局
    • CodeSnippet
  • Vue

    • Vue
  • React

    • React
  • Node.js

    • Node.js
  • 技术文档
  • UI组件库
  • 动画库
  • 图形库
  • 桌面端
  • 学习笔记
  • 生活笔记
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

MarginLon

http://info.cern.ch
首页
  • Web

    • Web基础
    • Web布局
    • CodeSnippet
  • Vue

    • Vue
  • React

    • React
  • Node.js

    • Node.js
  • 技术文档
  • UI组件库
  • 动画库
  • 图形库
  • 桌面端
  • 学习笔记
  • 生活笔记
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • Vue

  • Vue-Router

    • 仿Vue-Router效果
    • Vue-Router基本使用
    • 嵌套路由
    • 动态路由
    • 同级跳转刷新
    • 路由匹配及优先级
      • 匹配规则
      • 优先级
      • Sensitive 与 strict 路由配置
    • 命名路由
    • 重定向及别名
    • 编程式导航
    • 命名视图
    • 高亮活动导航
    • 导航守卫
    • 路由元数据
  • Vuex

  • 《Vue》
  • Vue-Router
MarginLon
2022-08-30
目录

路由匹配及优先级

# 匹配规则

匹配404: /:notFound(.)/

const routes = [
  // /:orderId -> 仅匹配数字
  { path: '/:orderId(\\d+)' },
  // /:productName -> 匹配其他任何内容
  { path: '/:productName' },
]

const routes = [
  // /:chapters ->  匹配 /one, /one/two, /one/two/three, 等
  { path: '/:chapters+' },
  // /:chapters -> 匹配 /, /one, /one/two, /one/two/three, 等
  { path: '/:chapters*' },
]
1
2
3
4
5
6
7
8
9
10
11
12
13

# 优先级

路由定义得越具体,定义得越早,优先级就越高。

# Sensitive 与 strict 路由配置

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 将匹配 /users/posva 而非:
    // - /users/posva/ 当 strict: true
    // - /Users/posva 当 sensitive: true
    { path: '/users/:id', sensitive: true },
    // 将匹配 /users, /Users, 以及 /users/42 而非 /users/ 或 /users/42/
    { path: '/users/:id?' },
  ]
  strict: true, // applies to all routes
})
1
2
3
4
5
6
7
8
9
10
11
12
编辑 (opens new window)
上次更新: 2023/04/01, 15:26:22
同级跳转刷新
命名路由

← 同级跳转刷新 命名路由→

最近更新
01
KnockoutJS
11-12
02
综述
10-17
03
前言
10-12
更多文章>
Theme by Vdoing | Copyright © 2019-2024 MarginLon | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式