docs: add links

diff --git a/packages/docs/.vitepress/theme/styles/home-links.css b/packages/docs/.vitepress/theme/styles/home-links.css
index 87cdb063b3c19a767f69f26fa59c0a163c911b45..de0ef475f7e9f27d3109ce49420b3720498768d2 100644 (file)
--- a/packages/docs/.vitepress/theme/styles/home-links.css
+++ b/packages/docs/.vitepress/theme/styles/home-links.css
@@ -52,6 +52,28 @@ a.cta.vueschool::after {
   border-left: 7px solid currentColor;
 }
 
   border-left: 7px solid currentColor;
 }
 

+a.cta.rulekit {
+  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+}
+
+a.cta.rulekit::before {
+  content: '';
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-image: url('/rulekit-logo.svg');
+  background-size: 16px;
+  background-repeat: no-repeat;
+  background-position: center;
+  margin-right: 0.5em;
+  vertical-align: middle;
+  filter: brightness(0); /* Make it black by default */
+}
+
+html.dark a.cta.rulekit::before {
+  filter: brightness(0) invert(1); /* Make it white in dark mode */
+}
+

 @media (max-width: 420px) {
   a.cta.cta.vue-mastery {
     max-width: 320px;
 @media (max-width: 420px) {
   a.cta.cta.vue-mastery {
     max-width: 320px;

diff --git a/packages/docs/guide/advanced/composition-api.md b/packages/docs/guide/advanced/composition-api.md
index 26e84d1d8f1367acbf007c297e347863f70ef677..44e25251edd4996ef2e063d01bc8e90f8d1d7e0a 100644 (file)
--- a/packages/docs/guide/advanced/composition-api.md
+++ b/packages/docs/guide/advanced/composition-api.md
@@ -32,6 +32,8 @@ function pushWithQuery(query) {
 
 The `route` object is a reactive object. In most scenarios, you should **avoid watching the whole `route`** object. Instead, you can directly watch the properties you are expecting to change:
 
 
 The `route` object is a reactive object. In most scenarios, you should **avoid watching the whole `route`** object. Instead, you can directly watch the properties you are expecting to change:
 

+<RuleKitLink />
+

 ```vue
 <script setup>
 import { useRoute } from 'vue-router'
 ```vue
 <script setup>
 import { useRoute } from 'vue-router'

diff --git a/packages/docs/guide/advanced/data-fetching.md b/packages/docs/guide/advanced/data-fetching.md
index c6fd1bfb41bd3680f445b3b6da9b4387489968c7..cc8227e6e635bc65112ebd8df8e64df529935e77 100644 (file)
--- a/packages/docs/guide/advanced/data-fetching.md
+++ b/packages/docs/guide/advanced/data-fetching.md
@@ -1,5 +1,7 @@
 # Data Fetching
 
 # Data Fetching
 

+<RuleKitLink />
+

 Sometimes you need to fetch data from the server when a route is activated. For example, before rendering a user profile, you need to fetch the user's data from the server. We can achieve this in two different ways:
 
 - **Fetching After Navigation**: perform the navigation first, and fetch data in the incoming component's lifecycle hook. Display a loading state while data is being fetched.
 Sometimes you need to fetch data from the server when a route is activated. For example, before rendering a user profile, you need to fetch the user's data from the server. We can achieve this in two different ways:
 
 - **Fetching After Navigation**: perform the navigation first, and fetch data in the incoming component's lifecycle hook. Display a loading state while data is being fetched.

diff --git a/packages/docs/guide/advanced/dynamic-routing.md b/packages/docs/guide/advanced/dynamic-routing.md
index 6e5179bc3839cc1fc3bb2ee3caa2986c008697e3..f8de03c13ba0de54062b171a3f00fde44ffea0f3 100644 (file)
--- a/packages/docs/guide/advanced/dynamic-routing.md
+++ b/packages/docs/guide/advanced/dynamic-routing.md
@@ -36,6 +36,8 @@ router.replace(router.currentRoute.value.fullPath)
 
 Remember you can `await router.replace()` if you need to wait for the new route to be displayed.
 
 
 Remember you can `await router.replace()` if you need to wait for the new route to be displayed.
 

+<RuleKitLink />
+

 ## Adding routes inside navigation guards
 
 If you decide to add or remove routes inside of a navigation guard, you should not call `router.replace()` but trigger a redirection by returning the new location:
 ## Adding routes inside navigation guards
 
 If you decide to add or remove routes inside of a navigation guard, you should not call `router.replace()` but trigger a redirection by returning the new location:

diff --git a/packages/docs/guide/advanced/extending-router-link.md b/packages/docs/guide/advanced/extending-router-link.md
index 5102b9ad5303edf1aa032055060e765627d65e79..0e72a24db8f87cd55833d5e800004d01c5c63d73 100644 (file)
--- a/packages/docs/guide/advanced/extending-router-link.md
+++ b/packages/docs/guide/advanced/extending-router-link.md
@@ -124,6 +124,8 @@ export default {
 }
 ```
 
 }
 ```
 

+<RuleKitLink />
+

 In practice, you might want to use your `AppLink` component for different parts of your application. e.g. using [Tailwind CSS](https://tailwindcss.com), you could create a `NavLink.vue` component with all the classes:
 
 ```vue
 In practice, you might want to use your `AppLink` component for different parts of your application. e.g. using [Tailwind CSS](https://tailwindcss.com), you could create a `NavLink.vue` component with all the classes:
 
 ```vue

diff --git a/packages/docs/guide/advanced/lazy-loading.md b/packages/docs/guide/advanced/lazy-loading.md
index 82d00f624964b7d4bffa4238ecdc4716f3c6b735..7cbb183fdd58e678e239152d42ec4524e9cfdd7d 100644 (file)
--- a/packages/docs/guide/advanced/lazy-loading.md
+++ b/packages/docs/guide/advanced/lazy-loading.md
@@ -27,6 +27,8 @@ const router = createRouter({
 
 The `component` (and `components`) option accepts a function that returns a Promise of a component and Vue Router **will only fetch it when entering the page for the first time**, then use the cached version. Which means you can also have more complex functions as long as they return a Promise:
 
 
 The `component` (and `components`) option accepts a function that returns a Promise of a component and Vue Router **will only fetch it when entering the page for the first time**, then use the cached version. Which means you can also have more complex functions as long as they return a Promise:
 

+<RuleKitLink />
+

 ```js
 const UserDetails = () =>
   Promise.resolve({
 ```js
 const UserDetails = () =>
   Promise.resolve({

diff --git a/packages/docs/guide/advanced/meta.md b/packages/docs/guide/advanced/meta.md
index 321158ff637c323f095c283111421cffaf60c074..2099c8d2745896858c49ce9d055258d717760305 100644 (file)
--- a/packages/docs/guide/advanced/meta.md
+++ b/packages/docs/guide/advanced/meta.md
@@ -56,6 +56,8 @@ router.beforeEach((to, from) => {
 })
 ```
 
 })
 ```
 

+<RuleKitLink />
+

 ## TypeScript
 
 It is possible to type the meta field by extending the `RouteMeta` interface from `vue-router`:
 ## TypeScript
 
 It is possible to type the meta field by extending the `RouteMeta` interface from `vue-router`:

diff --git a/packages/docs/guide/advanced/navigation-failures.md b/packages/docs/guide/advanced/navigation-failures.md
index fb43286b7ddae85c1747977c2fd0eead80d18bb7..aee3f7e9a6108add7f13a0504f8f422ff644cbed 100644 (file)
--- a/packages/docs/guide/advanced/navigation-failures.md
+++ b/packages/docs/guide/advanced/navigation-failures.md
@@ -33,6 +33,8 @@ Now the menu will close once the navigation is finished but it will also close i
 
 If a navigation is prevented, resulting in the user staying on the same page, the resolved value of the `Promise` returned by `router.push` will be a _Navigation Failure_. Otherwise, it will be a _falsy_ value (usually `undefined`). This allows us to differentiate the case where we navigated away from where we are or not:
 
 
 If a navigation is prevented, resulting in the user staying on the same page, the resolved value of the `Promise` returned by `router.push` will be a _Navigation Failure_. Otherwise, it will be a _falsy_ value (usually `undefined`). This allows us to differentiate the case where we navigated away from where we are or not:
 

+<RuleKitLink />
+

 ```js
 const navigationResult = await router.push('/my-profile')
 
 ```js
 const navigationResult = await router.push('/my-profile')
 

diff --git a/packages/docs/guide/advanced/navigation-guards.md b/packages/docs/guide/advanced/navigation-guards.md
index 12975df37a6f6e4dca16ea2bcaae13d61913dacf..271add59f9248727710cf8309d4e0c1e77dd1dd4 100644 (file)
--- a/packages/docs/guide/advanced/navigation-guards.md
+++ b/packages/docs/guide/advanced/navigation-guards.md
@@ -5,6 +5,8 @@
   title="Learn how to add navigation guards"
 />
 
   title="Learn how to add navigation guards"
 />
 

+<RuleKitLink />
+

 As the name suggests, the navigation guards provided by Vue router are primarily used to guard navigations either by redirecting it or canceling it. There are a number of ways to hook into the route navigation process: globally, per-route, or in-component.
 
 ## Global Before Guards
 As the name suggests, the navigation guards provided by Vue router are primarily used to guard navigations either by redirecting it or canceling it. There are a number of ways to hook into the route navigation process: globally, per-route, or in-component.
 
 ## Global Before Guards

diff --git a/packages/docs/guide/advanced/router-view-slot.md b/packages/docs/guide/advanced/router-view-slot.md
index ded51b493dd465ed5f9adaf7c3de0f3aef59a376..79342b882e443f8fb33a20848f61e978b038a893 100644 (file)
--- a/packages/docs/guide/advanced/router-view-slot.md
+++ b/packages/docs/guide/advanced/router-view-slot.md
@@ -1,5 +1,7 @@
 # RouterView slot
 
 # RouterView slot
 

+<RuleKitLink />
+

 The RouterView component exposes a slot that can be used to render the route component:
 
 ```vue-html
 The RouterView component exposes a slot that can be used to render the route component:
 
 ```vue-html

diff --git a/packages/docs/guide/advanced/scroll-behavior.md b/packages/docs/guide/advanced/scroll-behavior.md
index 2bc2b26087ffdb3ccf5d356072a4f5e71383c7c1..79855cc6346933dadc06a51e13d26df3a64a3184 100644 (file)
--- a/packages/docs/guide/advanced/scroll-behavior.md
+++ b/packages/docs/guide/advanced/scroll-behavior.md
@@ -23,6 +23,8 @@ const router = createRouter({
 
 The `scrollBehavior` function receives the `to` and `from` route objects, like [Navigation Guards](./navigation-guards.md). The third argument, `savedPosition`, is only available if this is a `popstate` navigation (triggered by the browser's back/forward buttons).
 
 
 The `scrollBehavior` function receives the `to` and `from` route objects, like [Navigation Guards](./navigation-guards.md). The third argument, `savedPosition`, is only available if this is a `popstate` navigation (triggered by the browser's back/forward buttons).
 

+<RuleKitLink />
+

 The function can return a [`ScrollToOptions`](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions) position object:
 
 ```js
 The function can return a [`ScrollToOptions`](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions) position object:
 
 ```js

diff --git a/packages/docs/guide/advanced/transitions.md b/packages/docs/guide/advanced/transitions.md
index 6c78435cf8fe84df7246e260d89afb319cbc30db..8d3dd6c773d997460a76c804dd174a9cdaa20e30 100644 (file)
--- a/packages/docs/guide/advanced/transitions.md
+++ b/packages/docs/guide/advanced/transitions.md
@@ -45,6 +45,8 @@ const routes = [
 </router-view>
 ```
 
 </router-view>
 ```
 

+<RuleKitLink />
+

 ## Route-Based Dynamic Transition
 
 It is also possible to determine the transition to use dynamically based on the relationship between the target route and current route. Using a very similar snippet to the one just before:
 ## Route-Based Dynamic Transition
 
 It is also possible to determine the transition to use dynamically based on the relationship between the target route and current route. Using a very similar snippet to the one just before:

diff --git a/packages/docs/guide/advanced/typed-routes.md b/packages/docs/guide/advanced/typed-routes.md
index f72608494c4304dd3874ff214224ed75109e4835..20ec46805bbe198f6da2f284406236a205add0ec 100644 (file)
--- a/packages/docs/guide/advanced/typed-routes.md
+++ b/packages/docs/guide/advanced/typed-routes.md
@@ -1,5 +1,7 @@
 # Typed Routes <Badge type="tip" text="v4.4.0+" />
 
 # Typed Routes <Badge type="tip" text="v4.4.0+" />
 

+<RuleKitLink />
+

 ![RouterLink to autocomplete](https://user-images.githubusercontent.com/664177/176442066-c4e7fa31-4f06-4690-a49f-ed0fd880dfca.png)
 
 It's possible to configure the router to have a _map_ of typed routes. While this can be done manually, it is recommended to use the [unplugin-vue-router](https://github.com/posva/unplugin-vue-router) plugin to generate the routes and the types automatically.
 ![RouterLink to autocomplete](https://user-images.githubusercontent.com/664177/176442066-c4e7fa31-4f06-4690-a49f-ed0fd880dfca.png)
 
 It's possible to configure the router to have a _map_ of typed routes. While this can be done manually, it is recommended to use the [unplugin-vue-router](https://github.com/posva/unplugin-vue-router) plugin to generate the routes and the types automatically.

diff --git a/packages/docs/guide/essentials/active-links.md b/packages/docs/guide/essentials/active-links.md
index 3c5f23baa0c7a83dc9b07a111093812eca571d56..081bb3c7926ba3b447c35e1f5a8643f2c8463ef8 100644 (file)
--- a/packages/docs/guide/essentials/active-links.md
+++ b/packages/docs/guide/essentials/active-links.md
@@ -53,6 +53,8 @@ Then consider these two links:
 
 If the current location path is `/user/erina/role/admin` then these would both be considered _active_, so the class `router-link-active` would be applied to both links. But only the second link would be considered _exact_, so only that second link would have the class `router-link-exact-active`.
 
 
 If the current location path is `/user/erina/role/admin` then these would both be considered _active_, so the class `router-link-active` would be applied to both links. But only the second link would be considered _exact_, so only that second link would have the class `router-link-exact-active`.
 

+<RuleKitLink />
+

 ## Configuring the classes
 
 The RouterLink component has two props, `activeClass` and `exactActiveClass`, that can be used to change the names of the classes that are applied:
 ## Configuring the classes
 
 The RouterLink component has two props, `activeClass` and `exactActiveClass`, that can be used to change the names of the classes that are applied:

diff --git a/packages/docs/guide/essentials/dynamic-matching.md b/packages/docs/guide/essentials/dynamic-matching.md
index 6c221b5189728095ae1233e2803d6b82ca910826..42c05bfe12b44ebb2f16ef9b9e9ded3d6add58f1 100644 (file)
--- a/packages/docs/guide/essentials/dynamic-matching.md
+++ b/packages/docs/guide/essentials/dynamic-matching.md
@@ -160,6 +160,8 @@ See more in the [repeated params](./route-matching-syntax.md#Repeatable-params)
 
 If you are using [History mode](./history-mode.md), make sure to follow the instructions to correctly configure your server as well.
 
 
 If you are using [History mode](./history-mode.md), make sure to follow the instructions to correctly configure your server as well.
 

+<RuleKitLink />
+

 ## Advanced Matching Patterns
 
 Vue Router uses its own path matching syntax, inspired by the one used by `express`, so it supports many advanced matching patterns such as optional params, zero or more / one or more requirements, and even custom regex patterns. Please check the [Advanced Matching](./route-matching-syntax.md) documentation to explore them.
 ## Advanced Matching Patterns
 
 Vue Router uses its own path matching syntax, inspired by the one used by `express`, so it supports many advanced matching patterns such as optional params, zero or more / one or more requirements, and even custom regex patterns. Please check the [Advanced Matching](./route-matching-syntax.md) documentation to explore them.

diff --git a/packages/docs/guide/essentials/history-mode.md b/packages/docs/guide/essentials/history-mode.md
index 5a50bb9f0900912429167e0d50a9d5221626ae03..0bbdba94c99ae400efcffb0fcccf5b227b859c95 100644 (file)
--- a/packages/docs/guide/essentials/history-mode.md
+++ b/packages/docs/guide/essentials/history-mode.md
@@ -203,6 +203,8 @@ Create a `vercel.json` file under the root directory of your project with the fo
 }
 ```
 
 }
 ```
 

+<RuleKitLink />
+

 ## Caveat
 
 There is a caveat to this: Your server will no longer report 404 errors as all not-found paths now serve up your `index.html` file. To get around the issue, you should implement a catch-all route within your Vue app to show a 404 page:
 ## Caveat
 
 There is a caveat to this: Your server will no longer report 404 errors as all not-found paths now serve up your `index.html` file. To get around the issue, you should implement a catch-all route within your Vue app to show a 404 page:

diff --git a/packages/docs/guide/essentials/named-routes.md b/packages/docs/guide/essentials/named-routes.md
index d1e27aae7c5d0284c960376d23775fdadc563eff..37dd763f8f6f24202bd005fe22b68d6df1bbcc68 100644 (file)
--- a/packages/docs/guide/essentials/named-routes.md
+++ b/packages/docs/guide/essentials/named-routes.md
@@ -36,6 +36,8 @@ Using a `name` has various advantages:
 - Avoids URL typos.
 - Bypassing path ranking, e.g. to display a lower-ranked route that matches the same path.
 
 - Avoids URL typos.
 - Bypassing path ranking, e.g. to display a lower-ranked route that matches the same path.
 

+<RuleKitLink />
+

 Each name **must be unique** across all routes. If you add the same name to multiple routes, the router will only keep the last one. You can read more about this [in the Dynamic Routing](../advanced/dynamic-routing#Removing-routes) section.
 
 There are various other parts of Vue Router that can be passed a location, e.g. the methods `router.push()` and `router.replace()`. We'll go into more detail about those methods in the guide to [programmatic navigation](./navigation). Just like the `to` prop, these methods also support passing a location by `name`:
 Each name **must be unique** across all routes. If you add the same name to multiple routes, the router will only keep the last one. You can read more about this [in the Dynamic Routing](../advanced/dynamic-routing#Removing-routes) section.
 
 There are various other parts of Vue Router that can be passed a location, e.g. the methods `router.push()` and `router.replace()`. We'll go into more detail about those methods in the guide to [programmatic navigation](./navigation). Just like the `to` prop, these methods also support passing a location by `name`:

diff --git a/packages/docs/guide/essentials/named-views.md b/packages/docs/guide/essentials/named-views.md
index 2312baa4bff4e69c2d1790f0157c1820e97343bf..03ca222ec5b16275d85c5c8cce6365b5641b3a33 100644 (file)
--- a/packages/docs/guide/essentials/named-views.md
+++ b/packages/docs/guide/essentials/named-views.md
@@ -95,3 +95,5 @@ Then you can achieve the layout above with this route configuration:
 ```
 
 A working demo of this example can be found [here](https://codesandbox.io/s/nested-named-views-vue-router-4-examples-re9yl?&initialpath=%2Fsettings%2Femails).
 ```
 
 A working demo of this example can be found [here](https://codesandbox.io/s/nested-named-views-vue-router-4-examples-re9yl?&initialpath=%2Fsettings%2Femails).

+
+<RuleKitLink />

diff --git a/packages/docs/guide/essentials/navigation.md b/packages/docs/guide/essentials/navigation.md
index 70a8131b4c2f054585f437128f9f130d652b2e3a..070c071d045603dfce1d9de12549959d48e78ddb 100644 (file)
--- a/packages/docs/guide/essentials/navigation.md
+++ b/packages/docs/guide/essentials/navigation.md
@@ -111,3 +111,5 @@ You may have noticed that `router.push`, `router.replace` and `router.go` are co
 Therefore, if you are already familiar with [Browser History APIs](https://developer.mozilla.org/en-US/docs/Web/API/History_API), manipulating history will feel familiar when using Vue Router.
 
 It is worth mentioning that Vue Router navigation methods (`push`, `replace`, `go`) work consistently no matter the `history` option passed when creating the router instance.
 Therefore, if you are already familiar with [Browser History APIs](https://developer.mozilla.org/en-US/docs/Web/API/History_API), manipulating history will feel familiar when using Vue Router.
 
 It is worth mentioning that Vue Router navigation methods (`push`, `replace`, `go`) work consistently no matter the `history` option passed when creating the router instance.

+
+<RuleKitLink />

diff --git a/packages/docs/guide/essentials/nested-routes.md b/packages/docs/guide/essentials/nested-routes.md
index 4bf0086d306bf06e9a4928dd89eff055e0b78639..e966da5353da387c4fae7bd37fa503b8041a25c6 100644 (file)
--- a/packages/docs/guide/essentials/nested-routes.md
+++ b/packages/docs/guide/essentials/nested-routes.md
@@ -106,6 +106,8 @@ const routes = [
 
 A working demo of this example can be found [here](https://codesandbox.io/s/nested-views-vue-router-4-examples-hl326?initialpath=%2Fusers%2Feduardo).
 
 
 A working demo of this example can be found [here](https://codesandbox.io/s/nested-views-vue-router-4-examples-hl326?initialpath=%2Fusers%2Feduardo).
 

+<RuleKitLink />
+

 ## Nested Named Routes
 
 When dealing with [Named Routes](./named-routes.md), you usually **name the children routes**:
 ## Nested Named Routes
 
 When dealing with [Named Routes](./named-routes.md), you usually **name the children routes**:

diff --git a/packages/docs/guide/essentials/passing-props.md b/packages/docs/guide/essentials/passing-props.md
index e5d9f675864e8b91d9508389dc4ba8db731845e8..88c473baa2c10ca88a9e8624a7ce39983a4e32a1 100644 (file)
--- a/packages/docs/guide/essentials/passing-props.md
+++ b/packages/docs/guide/essentials/passing-props.md
@@ -143,3 +143,5 @@ You can also pass any props via the [`<RouterView>` slot](../advanced/router-vie
 ::: warning
 In this case, **all view components** will receive `view-prop`. This is usually not a good idea as  it means that all of the view components have declared a `view-prop` prop, which is not necessarily true. If possible, use any of the options above.
 :::
 ::: warning
 In this case, **all view components** will receive `view-prop`. This is usually not a good idea as  it means that all of the view components have declared a `view-prop` prop, which is not necessarily true. If possible, use any of the options above.
 :::

+
+<RuleKitLink />

diff --git a/packages/docs/guide/essentials/redirect-and-alias.md b/packages/docs/guide/essentials/redirect-and-alias.md
index 46205283d003a7b9c4bcba52defe7f3c989d6b35..48df9e37614c13ea02b7cae05914c5f658c1c260 100644 (file)
--- a/packages/docs/guide/essentials/redirect-and-alias.md
+++ b/packages/docs/guide/essentials/redirect-and-alias.md
@@ -109,3 +109,5 @@ const routes = [
 ```
 
 **Note about SEO**: when using aliases, make sure to [define canonical links](https://support.google.com/webmasters/answer/139066?hl=en).
 ```
 
 **Note about SEO**: when using aliases, make sure to [define canonical links](https://support.google.com/webmasters/answer/139066?hl=en).

+
+<RuleKitLink />

diff --git a/packages/docs/guide/essentials/route-matching-syntax.md b/packages/docs/guide/essentials/route-matching-syntax.md
index febc76c37000e8feb0c331f2ba2f542483631302..b18244983067ff4cb350ea070eb4e9563dcd2064 100644 (file)
--- a/packages/docs/guide/essentials/route-matching-syntax.md
+++ b/packages/docs/guide/essentials/route-matching-syntax.md
@@ -125,6 +125,8 @@ You can play around with the matching syntax [in the playground](https://paths.e
 
 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.
 
 
 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.
 

+<RuleKitLink />
+

 ## Avoiding slow regex
 
 When using custom regex, make sure to avoid using slow regex patterns. For example, using `.*` will match any character and can lead to **serious performance issues** if it's combined with a repeatable modifier `*` or `+` and anything after it:
 ## Avoiding slow regex
 
 When using custom regex, make sure to avoid using slow regex patterns. For example, using `.*` will match any character and can lead to **serious performance issues** if it's combined with a repeatable modifier `*` or `+` and anything after it:

diff --git a/packages/docs/guide/index.md b/packages/docs/guide/index.md
index 4399da53f146514e6714b2fa9e88bf56728b1cea..383780d5e53ced7415d2fe15a0606558007fe8a5 100644 (file)
--- a/packages/docs/guide/index.md
+++ b/packages/docs/guide/index.md
@@ -10,9 +10,7 @@ Client-side routing is used by single-page applications (SPAs) to tie the browse
 
 Vue Router is built on Vue's component system. You configure **routes** to tell Vue Router which components to show for each URL path.
 
 
 Vue Router is built on Vue's component system. You configure **routes** to tell Vue Router which components to show for each URL path.
 

-::: tip Prerequisites

 This guide will assume that you are already familiar with Vue itself. You don't need to be a Vue expert, but you may occasionally need to refer back to [the core Vue documentation](https://vuejs.org/) for more information about certain features.
 This guide will assume that you are already familiar with Vue itself. You don't need to be a Vue expert, but you may occasionally need to refer back to [the core Vue documentation](https://vuejs.org/) for more information about certain features.

-:::

 
 <RuleKitLink />
 
 
 <RuleKitLink />
 

diff --git a/packages/docs/guide/migration/index.md b/packages/docs/guide/migration/index.md
index 6fb85383b712f0248a1a5a805a9ff73426d206e0..0d9e78cfb8adb9e95f47a8479211da84d11be70f 100644 (file)
--- a/packages/docs/guide/migration/index.md
+++ b/packages/docs/guide/migration/index.md
@@ -1,5 +1,7 @@
 # Migrating from Vue 2
 
 # Migrating from Vue 2
 

+<RuleKitLink />
+

 Most of Vue Router API has remained unchanged during its rewrite from v3 (for Vue 2) to v4 (for Vue 3) but there are still a few breaking changes that you might encounter while migrating your application. This guide is here to help you understand why these changes happened and how to adapt your application to make it work with Vue Router 4.
 
 ## Breaking Changes
 Most of Vue Router API has remained unchanged during its rewrite from v3 (for Vue 2) to v4 (for Vue 3) but there are still a few breaking changes that you might encounter while migrating your application. This guide is here to help you understand why these changes happened and how to adapt your application to make it work with Vue Router 4.
 
 ## Breaking Changes

diff --git a/packages/docs/index.md b/packages/docs/index.md
index 5ab611f43fb0cd57ec5bf2bcb1cac0e17c9ecf1d..8a289af268187eaf83d084095b93a3cc502c6ec3 100644 (file)
--- a/packages/docs/index.md
+++ b/packages/docs/index.md
@@ -15,6 +15,9 @@ hero:
     - theme: brand
       text: Get Started
       link: /installation
     - theme: brand
       text: Get Started
       link: /installation

+    - theme: cta rulekit
+      text: RuleKit
+      link: https://rulekit.dev?from=vuerouter

     - theme: cta vueschool
       text: Free Video Course
       link: https://vueschool.io/courses/vue-router-4-for-everyone?friend=vuerouter&utm_source=vuerouter&utm_medium=link&utm_campaign=homepage
     - theme: cta vueschool
       text: Free Video Course
       link: https://vueschool.io/courses/vue-router-4-for-everyone?friend=vuerouter&utm_source=vuerouter&utm_medium=link&utm_campaign=homepage

diff --git a/packages/docs/installation.md b/packages/docs/installation.md
index aa1209e701b738366f97eb765eaea33b1331c33b..1d8e0dcc3bc238dde8b612668d2d3f3192d652da 100644 (file)
--- a/packages/docs/installation.md
+++ b/packages/docs/installation.md
@@ -63,3 +63,5 @@ Projects using package managers will typically use ES modules to access Vue Rout
 <!--/email_off-->
 
 This will expose Vue Router via a global `VueRouter` object, e.g. `VueRouter.createRouter(...)`.
 <!--/email_off-->
 
 This will expose Vue Router via a global `VueRouter` object, e.g. `VueRouter.createRouter(...)`.

+
+<RuleKitLink />

diff --git a/packages/docs/introduction.md b/packages/docs/introduction.md
index 62ba98d3c1a964ffbd8e3aa8612eea833da16152..bdac28a3c5b7d0fa73c36ddac16c25a965ef4ac9 100644 (file)
--- a/packages/docs/introduction.md
+++ b/packages/docs/introduction.md
@@ -18,6 +18,8 @@ Vue Router is the official router for [Vue.js](https://vuejs.org). It deeply int
 - Customizable Scroll Behavior
 - Proper encoding for URLs
 
 - Customizable Scroll Behavior
 - Proper encoding for URLs
 

+<RuleKitLink />
+

 [Get started](./guide/) or play with the [playground](https://github.com/vuejs/router/tree/main/packages/playground) (see [`README.md`](https://github.com/vuejs/router) to run them).
 
 <HomeSponsors />
 [Get started](./guide/) or play with the [playground](https://github.com/vuejs/router/tree/main/packages/playground) (see [`README.md`](https://github.com/vuejs/router) to run them).
 
 <HomeSponsors />

diff --git a/packages/docs/public/rulekit-logo.svg b/packages/docs/public/rulekit-logo.svg
new file mode 100644 (file)
index 0000000..f20d617
--- /dev/null
+++ b/packages/docs/public/rulekit-logo.svg
@@ -0,0 +1,6 @@
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M335 694L353.947 697.225V737L335 733.775V694Z" fill="currentColor"/>
+  <path d="M355 538.234V673L335 669.766V536.078L355 538.234Z" fill="currentColor"/>
+  <path d="M259.255 329.5L313.424 338.585V414.78L374.576 425.512V350.39L422.5 359.457L422.529 391.816L399.251 388.374V443.756L375.649 440.537V460.314L313.424 449.576V430.878L287.675 426.585L286.602 367.561L259.255 364V329.5Z" fill="currentColor"/>
+  <path d="M398.897 113.5L647.031 158.597V199L676.034 205.5V276L836.085 304.623L896.239 362.605V498.968L873.681 516.147V778.5L914.5 792.095L755.522 914.5L180.84 802.832L130.354 738.409V472.125L103.5 457.092V336.835L164.728 270.264L291.48 205.5L321.557 211V176.85L350.56 165.5V139L398.897 113.5ZM379.562 148.933V184L350.56 182.218L349.485 259.527L379.562 263.822V184L582.581 218.725V300.328L622.325 307V224.094L598.693 220.873V188.661L379.562 148.933ZM433.271 218.725V234.831L561.097 257.379V240.2L433.271 218.725ZM291.48 234.831L223.807 272.412L740.484 364.752L802.786 325.024L673.885 302.476L622.325 330L561.097 319V282L433.271 259.527L389.23 285.296L321.557 275V240.2L291.48 234.831ZM180.84 288.517L128.206 343.277V440.537L233.475 461.387L232.401 360.457L259.255 364V446L284.103 449.576V476.42L311.889 480.714V750L373.117 762L374.191 691.165V493.599L399.251 497V472.125L422.5 476.42L422.529 391.816L449.383 396.964V500L543.911 516V414.143L571.839 418.438V388.374L624.474 396.964V423.807L652.402 428V534.5L778.08 551.5V443.756L731 392.244L180.84 288.517ZM831.789 336.835L757.671 383.005L796.341 423.807L871.533 374.416L831.789 336.835ZM807.083 445.281V529.032L871.533 486.083V404.48L807.083 445.281ZM571.839 449.576V521.516L587 524.5V592L606.213 595.603V527.5L624.474 531V458.5L571.839 449.576ZM155.06 472.125V729.5L191.5 778.5L713 880.5L754.448 853.298V579.497L635.215 560.17V601L682.479 609.562V649.29L663.144 647V682.575L682.479 684.723L683.5 814.5L652.402 808.201V839L543.911 819.5V788.874L511.685 783.505V654.5L532.095 658.5V623.52L511.685 620.299V578.424L557.875 585.94V545.138L422.5 521.516L402.12 538.234V654.658V766.326L373.117 762V791.021L311.889 778.5V750L285.035 744.851V512.926L264.5 493.599L155.06 472.125ZM778.08 579.497L780.228 833.971L847.901 781.358V538.234L778.08 579.497ZM561.097 627.5V664.5L543.911 661V788.874L565.394 793.169L567 669L584.729 672V632.5L561.097 627.5ZM611.583 639.626V676.5L628.77 679V802.832L652.402 808.201V682.575L635.215 680.428V643L611.583 639.626Z" fill="currentColor"/>
+</svg>
\ No newline at end of file

diff --git a/packages/docs/zh/about-translation.md b/packages/docs/zh/about-translation.md
index 51a0de3d438bdaf3ea952d97883f3a3cf4410840..1c9610fd8388d6b1a46031b77df1dc94370ba03d 100644 (file)
--- a/packages/docs/zh/about-translation.md
+++ b/packages/docs/zh/about-translation.md
@@ -1,5 +1,7 @@
 # 关于中文翻译
 
 # 关于中文翻译
 

+<RuleKitLink />
+

 这里是 Vue Router 文档的中文翻译，该翻译由 Vue 社区贡献完成，如对翻译有任何疑问，可在我们的 GitHub 仓库创建 issue 或 pull request。谢谢。
 
 ## 协作指南
 这里是 Vue Router 文档的中文翻译，该翻译由 Vue 社区贡献完成，如对翻译有任何疑问，可在我们的 GitHub 仓库创建 issue 或 pull request。谢谢。
 
 ## 协作指南

diff --git a/packages/docs/zh/guide/advanced/composition-api.md b/packages/docs/zh/guide/advanced/composition-api.md
index 2385633e9d727918c495b1d0aec6a230408065a5..e88199054c3d1b994d3e8e802a46d8e896a17331 100644 (file)
--- a/packages/docs/zh/guide/advanced/composition-api.md
+++ b/packages/docs/zh/guide/advanced/composition-api.md
@@ -32,6 +32,8 @@ function pushWithQuery(query) {
 
 `route` 对象是一个响应式对象。在多数情况下，你应该**避免监听整个 `route`** 对象，同时直接监听你期望改变的参数。
 
 
 `route` 对象是一个响应式对象。在多数情况下，你应该**避免监听整个 `route`** 对象，同时直接监听你期望改变的参数。
 

+<RuleKitLink />
+

 ```vue
 <script setup>
 import { useRoute } from 'vue-router'
 ```vue
 <script setup>
 import { useRoute } from 'vue-router'

diff --git a/packages/docs/zh/guide/advanced/data-fetching.md b/packages/docs/zh/guide/advanced/data-fetching.md
index 4355a30d33f0383deedaf4b4faf7e68c1eda0a16..8d4f94c9012a3068614c82305282b95908090d20 100644 (file)
--- a/packages/docs/zh/guide/advanced/data-fetching.md
+++ b/packages/docs/zh/guide/advanced/data-fetching.md
@@ -1,5 +1,7 @@
 # 数据获取
 
 # 数据获取
 

+<RuleKitLink />
+

 有时候，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现：
 
 - **导航完成之后获取**：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。
 有时候，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现：
 
 - **导航完成之后获取**：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。

diff --git a/packages/docs/zh/guide/advanced/dynamic-routing.md b/packages/docs/zh/guide/advanced/dynamic-routing.md
index 543c43a79e43db7434ca7a460b8e20cc88b66eb7..3c0ceb2a51e9adc97afcfc72fb20b74850f5e3ef 100644 (file)
--- a/packages/docs/zh/guide/advanced/dynamic-routing.md
+++ b/packages/docs/zh/guide/advanced/dynamic-routing.md
@@ -36,6 +36,8 @@ router.replace(router.currentRoute.value.fullPath)
 
 记住，如果你需要等待新的路由显示，可以使用 `await router.replace()`。
 
 
 记住，如果你需要等待新的路由显示，可以使用 `await router.replace()`。
 

+<RuleKitLink />
+

 ## 在导航守卫中添加路由
 
 如果你决定在导航守卫内部添加或删除路由，你不应该调用 `router.replace()`，而是通过返回新的位置来触发重定向：
 ## 在导航守卫中添加路由
 
 如果你决定在导航守卫内部添加或删除路由，你不应该调用 `router.replace()`，而是通过返回新的位置来触发重定向：

diff --git a/packages/docs/zh/guide/advanced/extending-router-link.md b/packages/docs/zh/guide/advanced/extending-router-link.md
index 16a21996c31ddba2b56e1246013e1ca7b2e69d34..a7d931d32a9467a022bd4c520d6f3b1535c0fef6 100644 (file)
--- a/packages/docs/zh/guide/advanced/extending-router-link.md
+++ b/packages/docs/zh/guide/advanced/extending-router-link.md
@@ -124,6 +124,8 @@ export default {
 }
 ```
 
 }
 ```
 

+<RuleKitLink />
+

 在实践中，你可能希望将你的 `AppLink` 组件用于应用程序的不同部分。例如，使用 [Tailwind CSS](https://tailwindcss.com)，你可以用所有的类创建一个 `NavLink.vue` 组件：
 
 ```vue
 在实践中，你可能希望将你的 `AppLink` 组件用于应用程序的不同部分。例如，使用 [Tailwind CSS](https://tailwindcss.com)，你可以用所有的类创建一个 `NavLink.vue` 组件：
 
 ```vue

diff --git a/packages/docs/zh/guide/advanced/lazy-loading.md b/packages/docs/zh/guide/advanced/lazy-loading.md
index bc52b100e9cda2244391f37d5d0a44209001fb42..5943c9368a5f5340e28aac40bd9341699950006d 100644 (file)
--- a/packages/docs/zh/guide/advanced/lazy-loading.md
+++ b/packages/docs/zh/guide/advanced/lazy-loading.md
@@ -27,6 +27,8 @@ const router = createRouter({
 
 `component` (和 `components`) 配置接收一个返回 Promise 组件的函数，Vue Router **只会在第一次进入页面时才会获取这个函数**，然后使用缓存数据。这意味着你也可以使用更复杂的函数，只要它们返回一个 Promise ：
 
 
 `component` (和 `components`) 配置接收一个返回 Promise 组件的函数，Vue Router **只会在第一次进入页面时才会获取这个函数**，然后使用缓存数据。这意味着你也可以使用更复杂的函数，只要它们返回一个 Promise ：
 

+<RuleKitLink />
+

 ```js
 const UserDetails = () =>
   Promise.resolve({
 ```js
 const UserDetails = () =>
   Promise.resolve({

diff --git a/packages/docs/zh/guide/advanced/meta.md b/packages/docs/zh/guide/advanced/meta.md
index 1063e01f9846bbc2702f525943fb8a282386f2af..c8a92db789328a38985f09aeda8bf62d28c58984 100644 (file)
--- a/packages/docs/zh/guide/advanced/meta.md
+++ b/packages/docs/zh/guide/advanced/meta.md
@@ -56,6 +56,8 @@ router.beforeEach((to, from) => {
 })
 ```
 
 })
 ```
 

+<RuleKitLink />
+

 ## TypeScript
 
 也可以继承来自 `vue-router` 中的 `RouteMeta` 来为 meta 字段添加类型：
 ## TypeScript
 
 也可以继承来自 `vue-router` 中的 `RouteMeta` 来为 meta 字段添加类型：

diff --git a/packages/docs/zh/guide/advanced/navigation-failures.md b/packages/docs/zh/guide/advanced/navigation-failures.md
index 79460435d43555b5372c73c3b5103bf4df7d4897..e2710a9e2cba25b7b7444ec2cf664749c2f0845a 100644 (file)
--- a/packages/docs/zh/guide/advanced/navigation-failures.md
+++ b/packages/docs/zh/guide/advanced/navigation-failures.md
@@ -33,6 +33,8 @@ this.isMenuOpen = false
 
 如果导航被阻止，导致用户停留在同一个页面上，由 `router.push` 返回的 `Promise` 的解析值将是 _Navigation Failure_。否则，它将是一个 _falsy_ 值(通常是 `undefined`)。这样我们就可以区分我们导航是否离开了当前位置：
 
 
 如果导航被阻止，导致用户停留在同一个页面上，由 `router.push` 返回的 `Promise` 的解析值将是 _Navigation Failure_。否则，它将是一个 _falsy_ 值(通常是 `undefined`)。这样我们就可以区分我们导航是否离开了当前位置：
 

+<RuleKitLink />
+

 ```js
 const navigationResult = await router.push('/my-profile')
 
 ```js
 const navigationResult = await router.push('/my-profile')
 

diff --git a/packages/docs/zh/guide/advanced/navigation-guards.md b/packages/docs/zh/guide/advanced/navigation-guards.md
index ce656340b82934e92bad10b723fd4e2b55f82618..d1d6e625984a3295eede7a45eecdcd954a8ca10b 100644 (file)
--- a/packages/docs/zh/guide/advanced/navigation-guards.md
+++ b/packages/docs/zh/guide/advanced/navigation-guards.md
@@ -5,6 +5,8 @@
   title="Learn how to add navigation guards"
 />
 
   title="Learn how to add navigation guards"
 />
 

+<RuleKitLink />
+

 正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。
 
 ## 全局前置守卫
 正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。
 
 ## 全局前置守卫

diff --git a/packages/docs/zh/guide/advanced/router-view-slot.md b/packages/docs/zh/guide/advanced/router-view-slot.md
index 85f21a13cfa94b5dd4fd575e0b091645b977e0c8..c0b3521099def54fbb6fe6d36c29ef71a630d703 100644 (file)
--- a/packages/docs/zh/guide/advanced/router-view-slot.md
+++ b/packages/docs/zh/guide/advanced/router-view-slot.md
@@ -1,5 +1,7 @@
 # RouterView 插槽
 
 # RouterView 插槽
 

+<RuleKitLink />
+

 RouterView 组件暴露了一个插槽，可以用来渲染路由组件：
 
 ```vue-html
 RouterView 组件暴露了一个插槽，可以用来渲染路由组件：
 
 ```vue-html

diff --git a/packages/docs/zh/guide/advanced/scroll-behavior.md b/packages/docs/zh/guide/advanced/scroll-behavior.md
index 86a3d4452f11d196dad481a0e30dea8c6b4214b7..de976309c80c6cd3d285cc42241f1133be1f5b32 100644 (file)
--- a/packages/docs/zh/guide/advanced/scroll-behavior.md
+++ b/packages/docs/zh/guide/advanced/scroll-behavior.md
@@ -23,6 +23,8 @@ const router = createRouter({
 
 `scrollBehavior` 函数接收 `to`和`from` 路由对象，如 [Navigation Guards](./navigation-guards.md)。第三个参数 `savedPosition`，只有当这是一个 `popstate` 导航时才可用（由浏览器的后退/前进按钮触发）。
 
 
 `scrollBehavior` 函数接收 `to`和`from` 路由对象，如 [Navigation Guards](./navigation-guards.md)。第三个参数 `savedPosition`，只有当这是一个 `popstate` 导航时才可用（由浏览器的后退/前进按钮触发）。
 

+<RuleKitLink />
+

 该函数可以返回一个 [`ScrollToOptions`](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions) 位置对象:
 
 ```js
 该函数可以返回一个 [`ScrollToOptions`](https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions) 位置对象:
 
 ```js

diff --git a/packages/docs/zh/guide/advanced/transitions.md b/packages/docs/zh/guide/advanced/transitions.md
index aaabd9e396f2e65ad1ed6cbea3bc6272315992f6..a0182c18f002090314d68155bcbed992505b1f98 100644 (file)
--- a/packages/docs/zh/guide/advanced/transitions.md
+++ b/packages/docs/zh/guide/advanced/transitions.md
@@ -45,6 +45,8 @@ const routes = [
 </router-view>
 ```
 
 </router-view>
 ```
 

+<RuleKitLink />
+

 ## 基于路由的动态过渡
 
 也可以根据目标路由和当前路由之间的关系，动态地确定使用的过渡。使用和刚才非常相似的片段：
 ## 基于路由的动态过渡
 
 也可以根据目标路由和当前路由之间的关系，动态地确定使用的过渡。使用和刚才非常相似的片段：

diff --git a/packages/docs/zh/guide/advanced/typed-routes.md b/packages/docs/zh/guide/advanced/typed-routes.md
index 6397f1d2346a4ee8c293ccfd7261489c434e46a0..8cb7edcf8ad0cd255a86aa512d0d76f3c6099903 100644 (file)
--- a/packages/docs/zh/guide/advanced/typed-routes.md
+++ b/packages/docs/zh/guide/advanced/typed-routes.md
@@ -1,5 +1,7 @@
 # 类型化路由 (v4.1.0+)
 
 # 类型化路由 (v4.1.0+)
 

+<RuleKitLink />
+

 ::: danger ‼️ 实验性功能
 
 从 v4.1.0 开始，我们引入一个新的功能，称为类型化路由。这个**实验性**功能通过 Vite/webpack/Rollup 插件启用。
 ::: danger ‼️ 实验性功能
 
 从 v4.1.0 开始，我们引入一个新的功能，称为类型化路由。这个**实验性**功能通过 Vite/webpack/Rollup 插件启用。

diff --git a/packages/docs/zh/guide/essentials/active-links.md b/packages/docs/zh/guide/essentials/active-links.md
index 1121d3b1ef0217aace485765d5975d07871ec4a4..a70620dace1091eb0d99efb36130bc2f397efb62 100644 (file)
--- a/packages/docs/zh/guide/essentials/active-links.md
+++ b/packages/docs/zh/guide/essentials/active-links.md
@@ -53,6 +53,8 @@ const routes = [
 
 如果当前路径是 `/user/erina/role/admin`，那么这两个链接都会被认为是**匹配当前路由的**，因此 `router-link-active` 类会应用于这两个链接。但只有第二个链接会被认为是**精确的**，因此只有第二个链接会有 `router-link-exact-active` 类。
 
 
 如果当前路径是 `/user/erina/role/admin`，那么这两个链接都会被认为是**匹配当前路由的**，因此 `router-link-active` 类会应用于这两个链接。但只有第二个链接会被认为是**精确的**，因此只有第二个链接会有 `router-link-exact-active` 类。
 

+<RuleKitLink />
+

 ## 配置类名
 
 RouterLink 组件有两个属性，`activeClass` 和 `exactActiveClass`，可以用来更改应用的类名：
 ## 配置类名
 
 RouterLink 组件有两个属性，`activeClass` 和 `exactActiveClass`，可以用来更改应用的类名：

diff --git a/packages/docs/zh/guide/essentials/dynamic-matching.md b/packages/docs/zh/guide/essentials/dynamic-matching.md
index 5ba892e86231676262db261f03a3099f8d5a9701..4a0b84a2566660809e2dc7bf4ff13a0e42191178 100644 (file)
--- a/packages/docs/zh/guide/essentials/dynamic-matching.md
+++ b/packages/docs/zh/guide/essentials/dynamic-matching.md
@@ -157,6 +157,8 @@ router.push({
 
 如果你正在使用[历史模式](./history-mode.md)，请务必按照说明正确配置你的服务器。
 
 
 如果你正在使用[历史模式](./history-mode.md)，请务必按照说明正确配置你的服务器。
 

+<RuleKitLink />
+

 ## 高级匹配模式
 
 Vue Router 使用自己的路径匹配语法，其灵感来自于 `express`，因此它支持许多高级匹配模式，如可选的参数，零或多个 / 一个或多个，甚至自定义的正则匹配规则。请查看[高级匹配](./route-matching-syntax.md)文档来探索它们。
 ## 高级匹配模式
 
 Vue Router 使用自己的路径匹配语法，其灵感来自于 `express`，因此它支持许多高级匹配模式，如可选的参数，零或多个 / 一个或多个，甚至自定义的正则匹配规则。请查看[高级匹配](./route-matching-syntax.md)文档来探索它们。

diff --git a/packages/docs/zh/guide/essentials/history-mode.md b/packages/docs/zh/guide/essentials/history-mode.md
index b4fc6f776f860dedb14f859ad1762f44767d751c..be426ed21b625c2fd669e2d1f6450cba104d3370 100644 (file)
--- a/packages/docs/zh/guide/essentials/history-mode.md
+++ b/packages/docs/zh/guide/essentials/history-mode.md
@@ -202,6 +202,8 @@ rewrite {
 }
 ```
 
 }
 ```
 

+<RuleKitLink />
+

 ## 附加说明
 
 这有一个注意事项。你的服务器将不再报告 404 错误，因为现在所有未找到的路径都会显示你的 `index.html` 文件。为了解决这个问题，你应该在你的 Vue 应用程序中实现一个万能的路由来显示 404 页面。
 ## 附加说明
 
 这有一个注意事项。你的服务器将不再报告 404 错误，因为现在所有未找到的路径都会显示你的 `index.html` 文件。为了解决这个问题，你应该在你的 Vue 应用程序中实现一个万能的路由来显示 404 页面。

diff --git a/packages/docs/zh/guide/essentials/named-routes.md b/packages/docs/zh/guide/essentials/named-routes.md
index da660ff8542612c1703d99d94099b92a2b5cfe52..561a9b5ce0368c9bce21ff55db9affcacf7afffc 100644 (file)
--- a/packages/docs/zh/guide/essentials/named-routes.md
+++ b/packages/docs/zh/guide/essentials/named-routes.md
@@ -36,6 +36,8 @@ const routes = [
 - 防止你在 URL 中出现打字错误。
 - 绕过路径排序，例如展示一个匹配相同路径但排序较低的路由。
 
 - 防止你在 URL 中出现打字错误。
 - 绕过路径排序，例如展示一个匹配相同路径但排序较低的路由。
 

+<RuleKitLink />
+

 所有路由的命名**都必须是唯一的**。如果为多条路由添加相同的命名，路由器只会保留最后那一条。你可以在[动态路由](../advanced/dynamic-routing.md#Removing-routes)章节了解更多。
 
 Vue Router 有很多其他部分可以传入网址，例如 `router.push()` 和 `router.replace()` 方法。我们将在[编程式导航](./navigation.md)指南中详细介绍这些方法。就像 `to` 属性一样，这些方法也支持通过 `name` 传入网址：
 所有路由的命名**都必须是唯一的**。如果为多条路由添加相同的命名，路由器只会保留最后那一条。你可以在[动态路由](../advanced/dynamic-routing.md#Removing-routes)章节了解更多。
 
 Vue Router 有很多其他部分可以传入网址，例如 `router.push()` 和 `router.replace()` 方法。我们将在[编程式导航](./navigation.md)指南中详细介绍这些方法。就像 `to` 属性一样，这些方法也支持通过 `name` 传入网址：

diff --git a/packages/docs/zh/guide/essentials/named-views.md b/packages/docs/zh/guide/essentials/named-views.md
index b9c568a9d2b0d00c48f702f471420f8ae8b8e697..36adc8e4b972ffaf1015f5b8dace89f544080538 100644 (file)
--- a/packages/docs/zh/guide/essentials/named-views.md
+++ b/packages/docs/zh/guide/essentials/named-views.md
@@ -90,3 +90,5 @@ const router = createRouter({
 ```
 
 以上案例相关的可运行代码请[移步这里](https://codesandbox.io/s/nested-named-views-vue-router-4-examples-re9yl?&initialpath=%2Fsettings%2Femails).
 ```
 
 以上案例相关的可运行代码请[移步这里](https://codesandbox.io/s/nested-named-views-vue-router-4-examples-re9yl?&initialpath=%2Fsettings%2Femails).

+
+<RuleKitLink />

diff --git a/packages/docs/zh/guide/essentials/navigation.md b/packages/docs/zh/guide/essentials/navigation.md
index 2ddba7879ea8cb3cd8ff03425879b9600420a642..3760539a89e4afc4d2430f69c61e70b0f639881b 100644 (file)
--- a/packages/docs/zh/guide/essentials/navigation.md
+++ b/packages/docs/zh/guide/essentials/navigation.md
@@ -111,3 +111,5 @@ router.go(100)
 因此，如果你已经熟悉 [Browser History APIs](https://developer.mozilla.org/en-US/docs/Web/API/History_API)，在使用 Vue Router 时，操作历史记录就会觉得很熟悉。
 
 值得一提的是，无论在创建路由器实例时传递什么 `history` 配置，Vue Router 的导航方法 (`push`、`replace`、`go`) 都能始终正常工作。
 因此，如果你已经熟悉 [Browser History APIs](https://developer.mozilla.org/en-US/docs/Web/API/History_API)，在使用 Vue Router 时，操作历史记录就会觉得很熟悉。
 
 值得一提的是，无论在创建路由器实例时传递什么 `history` 配置，Vue Router 的导航方法 (`push`、`replace`、`go`) 都能始终正常工作。

+
+<RuleKitLink />

diff --git a/packages/docs/zh/guide/essentials/nested-routes.md b/packages/docs/zh/guide/essentials/nested-routes.md
index 26f1b5840ca256fb30131c0a9c6f235ddfc7d7ce..40fd5481b933f728705fd8203691ac6405b2a29b 100644 (file)
--- a/packages/docs/zh/guide/essentials/nested-routes.md
+++ b/packages/docs/zh/guide/essentials/nested-routes.md
@@ -106,6 +106,8 @@ const routes = [
 
 这个例子的 demo 可以在[这里](https://codesandbox.io/s/nested-views-vue-router-4-examples-hl326?initialpath=%2Fusers%2Feduardo)找到。
 
 
 这个例子的 demo 可以在[这里](https://codesandbox.io/s/nested-views-vue-router-4-examples-hl326?initialpath=%2Fusers%2Feduardo)找到。
 

+<RuleKitLink />
+

 ## 嵌套的命名路由
 
 在处理[命名路由](./named-routes.md)时，**你通常会给子路由命名**：
 ## 嵌套的命名路由
 
 在处理[命名路由](./named-routes.md)时，**你通常会给子路由命名**：

diff --git a/packages/docs/zh/guide/essentials/passing-props.md b/packages/docs/zh/guide/essentials/passing-props.md
index dab41339fed66f68c123fc9c658e763e2faf3676..8349dd6c3d9a4a82d3e3bbc3a502537bca33af90 100644 (file)
--- a/packages/docs/zh/guide/essentials/passing-props.md
+++ b/packages/docs/zh/guide/essentials/passing-props.md
@@ -143,3 +143,5 @@ URL `/search?q=vue` 将传递 `{query: 'vue'}` 作为 props 传给 `SearchUser`
 ::: warning
 在这种情况下，**所有视图组件**都会接收到 `view-prop`。通常这并不是一个好主意，因为这意味着所有的视图组件都声明了一个 `view-prop` prop，但这未必需要。所以请尽可能使用上述的其他选项。
 :::
 ::: warning
 在这种情况下，**所有视图组件**都会接收到 `view-prop`。通常这并不是一个好主意，因为这意味着所有的视图组件都声明了一个 `view-prop` prop，但这未必需要。所以请尽可能使用上述的其他选项。
 :::

+
+<RuleKitLink />

diff --git a/packages/docs/zh/guide/essentials/redirect-and-alias.md b/packages/docs/zh/guide/essentials/redirect-and-alias.md
index ab3a6b7cc1a54c8efbcd8769c26f0e5dcbf908a5..29391eff026cfc24927443f5218177977c5fa220 100644 (file)
--- a/packages/docs/zh/guide/essentials/redirect-and-alias.md
+++ b/packages/docs/zh/guide/essentials/redirect-and-alias.md
@@ -109,3 +109,5 @@ const routes = [
 ```
 
 **关于 SEO 的注意事项**: 使用别名时，一定要[定义规范链接](https://support.google.com/webmasters/answer/139066?hl=en).
 ```
 
 **关于 SEO 的注意事项**: 使用别名时，一定要[定义规范链接](https://support.google.com/webmasters/answer/139066?hl=en).

+
+<RuleKitLink />

diff --git a/packages/docs/zh/guide/essentials/route-matching-syntax.md b/packages/docs/zh/guide/essentials/route-matching-syntax.md
index 372ed674a79134aed940554dcf10c805246e0bdd..fef89fb40c352284b0d2a38d3203eb50d945640e 100644 (file)
--- a/packages/docs/zh/guide/essentials/route-matching-syntax.md
+++ b/packages/docs/zh/guide/essentials/route-matching-syntax.md
@@ -117,3 +117,5 @@ const routes = [
 ## 调试
 
 如果你需要探究你的路由是如何转化为正则的，以了解为什么一个路由没有被匹配，或者，报告一个 bug，你可以使用[路径排名工具](https://paths.esm.dev/?p=AAMeJSyAwR4UbFDAFxAcAGAIJXMAAA..#)。它支持通过 URL 分享你的路由。
 ## 调试
 
 如果你需要探究你的路由是如何转化为正则的，以了解为什么一个路由没有被匹配，或者，报告一个 bug，你可以使用[路径排名工具](https://paths.esm.dev/?p=AAMeJSyAwR4UbFDAFxAcAGAIJXMAAA..#)。它支持通过 URL 分享你的路由。

+
+<RuleKitLink />

diff --git a/packages/docs/zh/guide/migration/index.md b/packages/docs/zh/guide/migration/index.md
index 895c6b392a1217da26af1bd3273306448df29cb2..4437c5bbcf7b191b8a7f888dcdbff81b11f35c8d 100644 (file)
--- a/packages/docs/zh/guide/migration/index.md
+++ b/packages/docs/zh/guide/migration/index.md
@@ -1,5 +1,7 @@
 # 从 Vue2 迁移
 
 # 从 Vue2 迁移
 

+<RuleKitLink />
+

 在 Vue Router API 从 v3（Vue2）到 v4（Vue3）的重写过程中，大部分的 Vue Router API 都没有变化，但是在迁移你的程序时，你可能会遇到一些破坏性的变化。本指南将帮助你了解为什么会发生这些变化，以及如何调整你的程序，使其与 Vue Router4 兼容。
 
 ## 破坏性变化
 在 Vue Router API 从 v3（Vue2）到 v4（Vue3）的重写过程中，大部分的 Vue Router API 都没有变化，但是在迁移你的程序时，你可能会遇到一些破坏性的变化。本指南将帮助你了解为什么会发生这些变化，以及如何调整你的程序，使其与 Vue Router4 兼容。
 
 ## 破坏性变化

diff --git a/packages/docs/zh/index.md b/packages/docs/zh/index.md
index 7590e7afa739fbbea7c800f4d07c1ad81726a591..3635c6c224d7d906f7209b9e695298551a23717b 100644 (file)
--- a/packages/docs/zh/index.md
+++ b/packages/docs/zh/index.md
@@ -15,6 +15,9 @@ hero:
     - theme: brand
       text: 入门 →
       link: /zh/introduction
     - theme: brand
       text: 入门 →
       link: /zh/introduction

+    - theme: cta rulekit
+      text: RuleKit
+      link: https://rulekit.dev?from=vuerouter

     - theme: cta vueschool
       text: 免费视频课程
       link: https://vueschool.io/courses/vue-router-4-for-everyone?friend=vuerouter&utm_source=vuerouter&utm_medium=link&utm_campaign=homepage
     - theme: cta vueschool
       text: 免费视频课程
       link: https://vueschool.io/courses/vue-router-4-for-everyone?friend=vuerouter&utm_source=vuerouter&utm_medium=link&utm_campaign=homepage

diff --git a/packages/docs/zh/installation.md b/packages/docs/zh/installation.md
index 5c6c45f7f56c28b506fff40e9a0a2620f0e5ab0a..8745e2d477fc662f1da5f6b1c5bebad43e1c97ca 100644 (file)
--- a/packages/docs/zh/installation.md
+++ b/packages/docs/zh/installation.md
@@ -56,3 +56,5 @@ pnpm create vue
 
 这将把 Vue Router 暴露在一个全局的 `VueRouter` 对象上，例如 `VueRouter.createRouter(...)`。
 
 
 这将把 Vue Router 暴露在一个全局的 `VueRouter` 对象上，例如 `VueRouter.createRouter(...)`。
 

+<RuleKitLink />
+

diff --git a/packages/docs/zh/introduction.md b/packages/docs/zh/introduction.md
index 701303c48f81eb5b2b4393d341598932caec7f8c..8d79d4fb6edbacb90d0c5bbb35afb7eb1812b15a 100644 (file)
--- a/packages/docs/zh/introduction.md
+++ b/packages/docs/zh/introduction.md
@@ -18,6 +18,8 @@ Vue Router 是 [Vue.js](https://cn.vuejs.org/) 的官方路由。它与 Vue.js 
 - 可定制的滚动行为
 - URL 的正确编码
 
 - 可定制的滚动行为
 - URL 的正确编码
 

+<RuleKitLink />
+

 [入门](./guide/)或使用 [playground](https://github.com/vuejs/router/tree/main/packages/playground) (详见[`README.md`](https://github.com/vuejs/router)来运行它们)。
 
 <HomeSponsors />
 [入门](./guide/)或使用 [playground](https://github.com/vuejs/router/tree/main/packages/playground) (详见[`README.md`](https://github.com/vuejs/router)来运行它们)。
 
 <HomeSponsors />