.github/ISSUE_TEMPLATE/bug_report.yml

@@ -9,7 +9,7 @@ body:
     id: reproduction
     attributes:
       label: Reproduction
-      description: "If possible, provide a boiled down editable reproduction using a service like [JSFiddle](https://jsfiddle.net/posva/3yq6ojLv), Codepen, [CodeSandbox](https://codesandbox.io/s/vue-router-4-reproduction-s1sqc), or a GitHub repository. A failing unit test is even better! Otherwise provide as much information as possible to reproduce the problem. If we can't reproduce the problem, we won't be able to give it a look **and the issue will be converted into a question and moved to discussions**."
+      description: "If possible, provide a boiled down editable reproduction with the [Vue.js Playground](https://play.vuejs.org/#eNqlVNtOGzEQ/RV3WylBJesQEA/bJYIiVFr1gmjVl24fNruTxLBrW7Y3BEX5947tvQUCL1UUxZ7LmTNzJt4EZcp4eKeDKGClFMqQDckUpAYupCRbMleiJINVBYOE1wFKVAZU7Qmpv3Zum9f4UilDn5vwFnWI34OEExJWGoY+3d9LUXEzHLzFtMFBcBjU6cgtNlDKAvOnNjBeHk2voSiELfYmpnh1Zul+8KCNEnwxvayUAl4zJjI1yyimtY9sNuSdc4Tzqihu0Em2WwdDPU7M01UDeOtYfmX8nhhxlgQ0CaafBJ7JtSghpp3/xYx0hpY27cLenuXFtKkZW112sX4zeCC0jqvdMW0Hg/Pys9yr5jcohXq8Ztrgz2Ft9Lh9lUetmq2etkFXuhG1MdTKNrLbhnbiWku3AoLrWg1Nzsgf28rG60IGdIC0BIJxlCzqym4Pd8PcHHdju9o2+O+TUgpL9fsdbizg0o8i2jef4YGr6YnicYvrmXBYu0ZzmKdV0WDj1PvzsKuqM8WkIRpMJUmR8gWqbzQqb+XyTjzi5clOT6YNEm705Jm4O+P8vzot1N5CXtBRmUrcJMGxlBtYUjuwQkScxdq6nbHmJFgaI3VEacXl/SJEjWgXcX4SHodjmuOQe9YQdDmaKfGg3eomgZu9xT7HIJrDyghR6FEq2UslngWen4an4REt2IwiOmU8h7XDttD4J99im0bjjszZ4kmTdq1YAeqHNAx3aKfZFJ+chy/OZlQFLdFsCdn9HvudXnvKNwqwuxX0mjOpWgC+B9Z99fM7rPHcOkuRVwVGv+K8BS2KynL0YR8rniPtXpxj+9lpxvjil75aG+C6acoSddNw8U7Iy1da7+gehye9KWrzWIAOM23fHHy8Dol9mXzeTKgcVEQmck2QLMvJ2/F4/MG6SoRjfDQTxogyIkdjuXZ2meY5km0tWCXhCEumJCXv8euA6+wC5vjn70cuJ/3KHXxHIMuyHoGIjPEzqRGC7T/iwGPK), or an editable [CodeSandbox](https://codesandbox.io/s/vue-router-4-reproduction-s1sqc), Stackblitz, or a GitHub repository. A failing unit test is even better! Otherwise provide as much information as possible to reproduce the problem. If we can't reproduce the problem, we won't be able to give it a look **and the issue will be converted into a question and moved to discussions**."
       placeholder: Reproduction
     validations:
       required: true

.github/workflows/test.yml

@@ -35,9 +35,9 @@ jobs:
 
       - run: pnpm install
       - run: pnpm run lint
-      - run: pnpm run -r test:types
       - run: pnpm run -r build
       - run: pnpm run -r build:dts
+      - run: pnpm run -r test:types
       - run: pnpm run -r test:unit
 
       # e2e tests that that run locally

README.md

@@ -1,4 +1,4 @@
-# vue-router [![release candidate](https://img.shields.io/npm/v/vue-router.svg)](https://www.npmjs.com/package/vue-router) [![test](https://github.com/vuejs/router/actions/workflows/test.yml/badge.svg)](https://github.com/vuejs/router/actions/workflows/test.yml)
+# vue-router [![release candidate](https://img.shields.io/npm/v/vue-router.svg)](https://www.npmjs.com/package/vue-router) [![test](https://github.com/vuejs/router/actions/workflows/test.yml/badge.svg)](https://github.com/vuejs/router/actions/workflows/test.yml) [![codecov](https://codecov.io/gh/vuejs/router/graph/badge.svg?token=azNM3FI0d1)](https://codecov.io/gh/vuejs/router)
 
 > - This is the repository for Vue Router 4 (for Vue 3)
 > - For Vue Router 3 (for Vue 2) see [vuejs/vue-router](https://github.com/vuejs/vue-router).
@@ -14,10 +14,10 @@ Vue Router is part of the Vue Ecosystem and is an MIT-licensed open source proje
 
 <h4 align="center">Silver Sponsors</h4>
 <p align="center">
-    <a href="https://www.vuemastery.com/" target="_blank" rel="noopener noreferrer">
+    <a href="https://route4me.com" target="_blank" rel="noopener noreferrer">
     <picture>
-      <source srcset="https://posva-sponsors.pages.dev/logos/vuemastery-dark.png" media="(prefers-color-scheme: dark)" height="42px" alt="VueMastery" />
-      <img src="https://posva-sponsors.pages.dev/logos/vuemastery-light.svg" height="42px" alt="VueMastery" />
+      <source srcset="https://posva-sponsors.pages.dev/logos/route4me.png" media="(prefers-color-scheme: dark)" height="42px" alt="Route Optimizer and Route Planner Software" />
+      <img src="https://posva-sponsors.pages.dev/logos/route4me.png" height="42px" alt="Route Optimizer and Route Planner Software" />
     </picture>
   </a>
     <a href="https://www.prefect.io/" target="_blank" rel="noopener noreferrer">
@@ -26,32 +26,38 @@ Vue Router is part of the Vue Ecosystem and is an MIT-licensed open source proje
       <img src="https://posva-sponsors.pages.dev/logos/prefectlogo-light.svg" height="42px" alt="Prefect" />
     </picture>
   </a>
+    <a href="https://www.vuemastery.com/" target="_blank" rel="noopener noreferrer">
+    <picture>
+      <source srcset="https://posva-sponsors.pages.dev/logos/vuemastery-dark.png" media="(prefers-color-scheme: dark)" height="42px" alt="VueMastery" />
+      <img src="https://posva-sponsors.pages.dev/logos/vuemastery-light.svg" height="42px" alt="VueMastery" />
+    </picture>
+  </a>
 </p>
 
 <h4 align="center">Bronze Sponsors</h4>
 <p align="center">
-    <a href="https://stormier.ninja" target="_blank" rel="noopener noreferrer">
+    <a href="https://storyblok.com" target="_blank" rel="noopener noreferrer">
     <picture>
-      <source srcset="https://avatars.githubusercontent.com/u/2486424?u=7b0c73ae5d090ce53bf59473094e9606fe082c59&v=4" media="(prefers-color-scheme: dark)" height="26px" alt="Stanislas Ormières" />
-      <img src="https://avatars.githubusercontent.com/u/2486424?u=7b0c73ae5d090ce53bf59473094e9606fe082c59&v=4" height="26px" alt="Stanislas Ormières" />
+      <source srcset="https://posva-sponsors.pages.dev/logos/storyblok.png" media="(prefers-color-scheme: dark)" height="26px" alt="Storyblok" />
+      <img src="https://posva-sponsors.pages.dev/logos/storyblok.png" height="26px" alt="Storyblok" />
     </picture>
   </a>
-    <a href="https://www.vuejs.de" target="_blank" rel="noopener noreferrer">
+    <a href="https://ui.nuxt.com/pro" target="_blank" rel="noopener noreferrer">
     <picture>
-      <source srcset="https://avatars.githubusercontent.com/u/4183726?u=6b50a8ea16de29d2982f43c5640b1db9299ebcd1&v=4" media="(prefers-color-scheme: dark)" height="26px" alt="Antony Konstantinidis" />
-      <img src="https://avatars.githubusercontent.com/u/4183726?u=6b50a8ea16de29d2982f43c5640b1db9299ebcd1&v=4" height="26px" alt="Antony Konstantinidis" />
+      <source srcset="https://posva-sponsors.pages.dev/logos/nuxt-dark.svg" media="(prefers-color-scheme: dark)" height="26px" alt="Nuxt UI Pro Templates" />
+      <img src="https://posva-sponsors.pages.dev/logos/nuxt-light.svg" height="26px" alt="Nuxt UI Pro Templates" />
     </picture>
   </a>
-    <a href="https://storyblok.com" target="_blank" rel="noopener noreferrer">
+    <a href="https://www.vuejs.de" target="_blank" rel="noopener noreferrer">
     <picture>
-      <source srcset="https://posva-sponsors.pages.dev/logos/storyblok.png" media="(prefers-color-scheme: dark)" height="26px" alt="Storyblok" />
-      <img src="https://posva-sponsors.pages.dev/logos/storyblok.png" height="26px" alt="Storyblok" />
+      <source srcset="https://avatars.githubusercontent.com/u/4183726?u=6b50a8ea16de29d2982f43c5640b1db9299ebcd1&v=4" media="(prefers-color-scheme: dark)" height="26px" alt="Antony Konstantinidis" />
+      <img src="https://avatars.githubusercontent.com/u/4183726?u=6b50a8ea16de29d2982f43c5640b1db9299ebcd1&v=4" height="26px" alt="Antony Konstantinidis" />
     </picture>
   </a>
-    <a href="https://ui.nuxt.com/pro" target="_blank" rel="noopener noreferrer">
+    <a href="https://stormier.ninja" target="_blank" rel="noopener noreferrer">
     <picture>
-      <source srcset="https://avatars.githubusercontent.com/u/81570812?v=4" media="(prefers-color-scheme: dark)" height="26px" alt="Nuxt UI Pro Templates" />
-      <img src="https://avatars.githubusercontent.com/u/81570812?v=4" height="26px" alt="Nuxt UI Pro Templates" />
+      <source srcset="https://avatars.githubusercontent.com/u/2486424?u=7b0c73ae5d090ce53bf59473094e9606fe082c59&v=4" media="(prefers-color-scheme: dark)" height="26px" alt="Stanislas Ormières" />
+      <img src="https://avatars.githubusercontent.com/u/2486424?u=7b0c73ae5d090ce53bf59473094e9606fe082c59&v=4" height="26px" alt="Stanislas Ormières" />
     </picture>
   </a>
 </p>

packages/docs/.vitepress/theme/components/sponsors.json

@@ -3,31 +3,25 @@
   "gold": [],
   "silver": [
     {
-      "alt": "VueMastery",
-      "href": "https://www.vuemastery.com/",
-      "imgSrcDark": "https://posva-sponsors.pages.dev/logos/vuemastery-dark.png",
-      "imgSrcLight": "https://posva-sponsors.pages.dev/logos/vuemastery-light.svg"
+      "alt": "Route Optimizer and Route Planner Software",
+      "href": "https://route4me.com",
+      "imgSrcDark": "https://posva-sponsors.pages.dev/logos/route4me.png",
+      "imgSrcLight": "https://posva-sponsors.pages.dev/logos/route4me.png"
     },
     {
       "alt": "Prefect",
       "href": "https://www.prefect.io/",
       "imgSrcDark": "https://posva-sponsors.pages.dev/logos/prefectlogo-dark.svg",
       "imgSrcLight": "https://posva-sponsors.pages.dev/logos/prefectlogo-light.svg"
+    },
+    {
+      "alt": "VueMastery",
+      "href": "https://www.vuemastery.com/",
+      "imgSrcDark": "https://posva-sponsors.pages.dev/logos/vuemastery-dark.png",
+      "imgSrcLight": "https://posva-sponsors.pages.dev/logos/vuemastery-light.svg"
     }
   ],
   "bronze": [
-    {
-      "alt": "Stanislas Ormières",
-      "href": "https://stormier.ninja",
-      "imgSrcDark": "https://avatars.githubusercontent.com/u/2486424?u=7b0c73ae5d090ce53bf59473094e9606fe082c59&v=4",
-      "imgSrcLight": "https://avatars.githubusercontent.com/u/2486424?u=7b0c73ae5d090ce53bf59473094e9606fe082c59&v=4"
-    },
-    {
-      "alt": "Antony Konstantinidis",
-      "href": "https://www.vuejs.de",
-      "imgSrcDark": "https://avatars.githubusercontent.com/u/4183726?u=6b50a8ea16de29d2982f43c5640b1db9299ebcd1&v=4",
-      "imgSrcLight": "https://avatars.githubusercontent.com/u/4183726?u=6b50a8ea16de29d2982f43c5640b1db9299ebcd1&v=4"
-    },
     {
       "alt": "Storyblok",
       "href": "https://storyblok.com",
@@ -37,8 +31,20 @@
     {
       "alt": "Nuxt UI Pro Templates",
       "href": "https://ui.nuxt.com/pro",
-      "imgSrcDark": "https://avatars.githubusercontent.com/u/81570812?v=4",
-      "imgSrcLight": "https://avatars.githubusercontent.com/u/81570812?v=4"
+      "imgSrcDark": "https://posva-sponsors.pages.dev/logos/nuxt-dark.svg",
+      "imgSrcLight": "https://posva-sponsors.pages.dev/logos/nuxt-light.svg"
+    },
+    {
+      "alt": "Antony Konstantinidis",
+      "href": "https://www.vuejs.de",
+      "imgSrcDark": "https://avatars.githubusercontent.com/u/4183726?u=6b50a8ea16de29d2982f43c5640b1db9299ebcd1&v=4",
+      "imgSrcLight": "https://avatars.githubusercontent.com/u/4183726?u=6b50a8ea16de29d2982f43c5640b1db9299ebcd1&v=4"
+    },
+    {
+      "alt": "Stanislas Ormières",
+      "href": "https://stormier.ninja",
+      "imgSrcDark": "https://avatars.githubusercontent.com/u/2486424?u=7b0c73ae5d090ce53bf59473094e9606fe082c59&v=4",
+      "imgSrcLight": "https://avatars.githubusercontent.com/u/2486424?u=7b0c73ae5d090ce53bf59473094e9606fe082c59&v=4"
     }
   ]
 }

packages/docs/guide/advanced/dynamic-routing.md

@@ -5,7 +5,7 @@
   title="Learn how to add routes at runtime"
 />
 
-Adding routes to your router is usually done via the `routes` option but in some situations, you might want to add or remove routes while the application is already running. Application with extensible interfaces like [Vue CLI UI](https://cli.vuejs.org/dev-guide/ui-api.html) can use this to make the application grow.
+Adding routes to your router is usually done via the `routes` option but in some situations, you might want to add or remove routes while the application is already running. Applications with extensible interfaces like [Vue CLI UI](https://cli.vuejs.org/dev-guide/ui-api.html) can use this to make the application grow.
 
 ## Adding routes
 
@@ -20,13 +20,13 @@ const router = createRouter({
 })
 ```
 
-Going to any page, `/about`, `/store`, or `/3-tricks-to-improve-your-routing-code` ends up rendering the `Article` component. If we are on `/about` and we add a new route:
+Going to any page like `/about`, `/store`, or `/3-tricks-to-improve-your-routing-code` ends up rendering the `Article` component. If we are on `/about` and we add a new route:
 
 ```js
 router.addRoute({ path: '/about', component: About })
 ```
 
-The page will still show the `Article` component, we need to manually call `router.replace()` to change the current location and overwrite where we were (instead of pushing a new entry, ending up in the same location twice in our history):
+The page will still show the `Article` component. We need to manually call `router.replace()` to change the current location and overwrite where we were (instead of pushing a new entry, ending up in the same location twice in our history):
 
 ```js
 router.addRoute({ path: '/about', component: About })
@@ -89,7 +89,7 @@ Whenever a route is removed, **all of its aliases and children** are removed wit
 
 ## Adding nested routes
 
-To add nested routes to an existing route, you can pass the _name_ of the route as its first parameter to `router.addRoute()`, this will effectively add the route as if it was added through `children`:
+To add nested routes to an existing route, you can pass the _name_ of the route as its first parameter to `router.addRoute()`. This will effectively add the route as if it was added through `children`:
 
 ```js
 router.addRoute({ name: 'admin', path: '/admin', component: Admin })
@@ -111,5 +111,5 @@ router.addRoute({
 
 Vue Router gives you two functions to look at existing routes:
 
-- [`router.hasRoute()`](/api/interfaces/Router.md#hasRoute): check if a route exists
+- [`router.hasRoute()`](/api/interfaces/Router.md#hasRoute): check if a route exists.
 - [`router.getRoutes()`](/api/interfaces/Router.md#getRoutes): get an array with all the route records.

packages/docs/guide/essentials/route-matching-syntax.md

@@ -24,7 +24,7 @@ const routes = [
 ]
 ```
 
-But in some scenarios we don't want to add that static section `/o`/`p`. However, `orderId` is always a number while `productName` can be anything, so we can specify a custom regex for a param in parentheses:
+But in some scenarios, we don't want to add that static section `/o` or `/p`. However, `orderId` is always a number while `productName` can be anything so we can specify a custom regex for a param in parentheses:
 
 ```js
 const routes = [
@@ -80,7 +80,7 @@ const routes = [
 ]
 ```
 
-## Sensitive and strict route options 
+## Sensitive and strict route options
 
 By default, all routes are case-insensitive and match routes with or without a trailing slash. e.g. a route `/users` matches `/users`, `/users/`, and even `/Users/`. This behavior can be configured with the `strict` and `sensitive` options, they can be set both at a router and route level:
 
@@ -114,6 +114,13 @@ const routes = [
 
 Note that `*` technically also marks a parameter as optional but `?` parameters cannot be repeated.
 
+If the route segment contains more than **just an optional parameter**, it won't match a path **without the trailing slash**. For example:
+
+- `/users/:uid?-:name?` won't match `/users`, only `/users/-` or even `/users/-/`
+- `/users/:uid(\\d+)?:name?` won't match `/users`, only `/users/`, `/users/2`, `/users/2/`, etc
+
+You can play around with the matching syntax [in the playground](https://paths.esm.dev/?p=AAMsIPQg4AoKzidgQFoEXAmw-IEBBRYYOE0SkABTASiz1qgBpgQA1QTsFjAb3h2onsmlAmGIFsCXjXh4AIA.&t=/users/2/#)
+
 ## Debugging
 
 If you need to dig how your routes are transformed into a regex to understand why a route isn't being matched or, to report a bug, you can use the [path ranker tool](https://paths.esm.dev/?p=AAMeJSyAwR4UbFDAFxAcAGAIJXMAAA..#). It supports sharing your routes through the URL.

packages/playground/package.json

@@ -9,16 +9,16 @@
     "preview": "vite preview --port 4173"
   },
   "dependencies": {
-    "vue": "^3.4.23"
+    "vue": "^3.4.29"
   },
   "devDependencies": {
     "@types/node": "^20.12.7",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/compiler-sfc": "^3.4.23",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vue/compiler-sfc": "^3.4.29",
     "@vue/tsconfig": "^0.5.1",
     "typescript": "~5.3.3",
-    "vite": "^5.2.9",
+    "vite": "^5.3.1",
     "vue-router": "workspace:*",
-    "vue-tsc": "^1.8.27"
+    "vue-tsc": "^2.0.21"
   }
 }

packages/router/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [4.4.1](https://github.com/vuejs/router/compare/v4.4.0...v4.4.1) (2024-07-31)
+
+### Bug Fixes
+
+- router typescript definations related to vue package ([#2295](https://github.com/vuejs/router/issues/2295)) ([a495ce0](https://github.com/vuejs/router/commit/a495ce0e1d545d521673d21af43e63a761b53e27))
+- **types:** stricter meta with required fields ([423d9f7](https://github.com/vuejs/router/commit/423d9f763ed033dd6687ce7687c859c92554a60d))
+
+### Features
+
+- **warn:** fix links to docs ([0cb5797](https://github.com/vuejs/router/commit/0cb57971efd767777011e872e9cc327e0a0da79f))
+
 # [4.4.0](https://github.com/vuejs/router/compare/v4.4.0-alpha.3...v4.4.0) (2024-06-21)
 
 This version introduces native support for [typed routes via the `RouteNamedMap`](https://router.vuejs.org/guide/advanced/typed-routes.html). It is now possible to define a map without [unplugin-vue-router](https://uvr.esm.is) and have the types inferred automatically. It is still recommended to use [unplugin-vue-router](https://uvr.esm.is) to automatically generate these types.

packages/router/__tests__/guards/navigatioGuardsInjections.spec.ts

@@ -1,18 +1,15 @@
 /**
- * @vitest-environment jsdom
+ * @vitest-environment happy-dom
  */
-import { createDom, newRouter as createRouter } from '../utils'
+import { newRouter as createRouter } from '../utils'
 import { mount } from '@vue/test-utils'
 import { inject } from 'vue'
 import { mockWarn } from '../vitest-mock-warn'
-import type { Router } from '../../src'
-import { describe, expect, it, beforeAll } from 'vitest'
+import { createMemoryHistory, type Router } from '../../src'
+import { describe, expect, it } from 'vitest'
 
 describe('inject() within navigation guards', () => {
   mockWarn()
-  beforeAll(() => {
-    createDom()
-  })
 
   const PageComponent = {
     template: `<div>Page</div>`,
@@ -97,6 +94,7 @@ describe('inject() within navigation guards', () => {
     it('beforeRouteUpdate', async () => {
       expect.assertions(1)
       const router = createRouter({
+        history: createMemoryHistory(),
         routes: [
           {
             path: '/',
@@ -118,6 +116,7 @@ describe('inject() within navigation guards', () => {
     it('beforeRouteLeave', async () => {
       expect.assertions(1)
       const router = createRouter({
+        history: createMemoryHistory(),
         routes: [
           { path: '/', component: PageComponent },
           {