From: Daniel Kelly Date: Fri, 4 Jun 2021 07:37:04 +0000 (-0500) Subject: docs: add Vue school links (#980) X-Git-Tag: v4.0.9~18 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=31fe4bbf93d694bc6bcd103f862c7efa146af808;p=thirdparty%2Fvuejs%2Frouter.git docs: add Vue school links (#980) --- diff --git a/docs/.vitepress/components/VueSchoolLink.vue b/docs/.vitepress/components/VueSchoolLink.vue new file mode 100644 index 00000000..8a6ef5dd --- /dev/null +++ b/docs/.vitepress/components/VueSchoolLink.vue @@ -0,0 +1,59 @@ + + + diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js index 323bb5f3..21fb2394 100644 --- a/docs/.vitepress/theme/index.js +++ b/docs/.vitepress/theme/index.js @@ -1,10 +1,12 @@ import DefaultTheme from 'vitepress/dist/client/theme-default' import Layout from './Layout.vue' +import VueSchoolLink from '../components/VueSchoolLink.vue' export default { ...DefaultTheme, Layout, enhanceApp({ app, router, siteData }) { + app.component('VueSchoolLink', VueSchoolLink) // app is the Vue 3 app instance from createApp() // router is VitePress' custom router (see `lib/app/router.js`) // siteData is a ref of current site-level metadata. diff --git a/docs/guide/advanced/lazy-loading.md b/docs/guide/advanced/lazy-loading.md index 71bf1677..911528fc 100644 --- a/docs/guide/advanced/lazy-loading.md +++ b/docs/guide/advanced/lazy-loading.md @@ -1,5 +1,10 @@ # Lazy Loading Routes + + When building apps with a bundler, the JavaScript bundle can become quite large, and thus affect the page load time. It would be more efficient if we can split each route's components into a separate chunks, and only load them when the route is visited. Vue Router supports [dynamic imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports) out of the box, meaning you can replace static imports with dynamic ones: diff --git a/docs/guide/advanced/transitions.md b/docs/guide/advanced/transitions.md index 817efdbb..ccfaddf6 100644 --- a/docs/guide/advanced/transitions.md +++ b/docs/guide/advanced/transitions.md @@ -1,5 +1,10 @@ # Transitions + + In order to use transitions on your route components and animate navigations, you need to use the [v-slot API](../../api/#router-view-s-v-slot): ```html diff --git a/docs/guide/essentials/dynamic-matching.md b/docs/guide/essentials/dynamic-matching.md index a3b31b74..1240151b 100644 --- a/docs/guide/essentials/dynamic-matching.md +++ b/docs/guide/essentials/dynamic-matching.md @@ -1,5 +1,10 @@ # Dynamic Route Matching with Params + + Very often we will need to map routes with the given pattern to the same component. For example we may have a `User` component which should be rendered for all users but with different user IDs. In Vue Router we can use a dynamic segment in the path to achieve that, we call that a _param_: ```js @@ -45,6 +50,11 @@ A working demo of this example can be found [here](https://codesandbox.io/s/rout ## Reacting to Params Changes + + One thing to note when using routes with params is that when the user navigates from `/users/johnny` to `/users/jolyne`, **the same component instance will be reused**. Since both routes render the same component, this is more efficient than destroying the old instance and then creating a new one. **However, this also means that the lifecycle hooks of the component will not be called**. To react to params changes in the same component, you can simply watch anything on the `$route` object, in this scenario, the `$route.params`: @@ -77,6 +87,11 @@ const User = { ## Catch all / 404 Not found Route + + Regular params will only match characters in between url fragments, separated by `/`. If we want to match **anything**, we can use a custom _param_ regexp by adding the regexp inside parentheses right after the _param_: ```js diff --git a/docs/guide/essentials/history-mode.md b/docs/guide/essentials/history-mode.md index e3f8fa8e..17476473 100644 --- a/docs/guide/essentials/history-mode.md +++ b/docs/guide/essentials/history-mode.md @@ -1,5 +1,10 @@ # Different History modes + + The `history` option when creating the router instance allows us to choose among different history modes. ## Hash Mode diff --git a/docs/guide/essentials/named-routes.md b/docs/guide/essentials/named-routes.md index b02a93a8..3580ad6a 100644 --- a/docs/guide/essentials/named-routes.md +++ b/docs/guide/essentials/named-routes.md @@ -1,5 +1,10 @@ # Named Routes + + Alongside the `path`, you can provide a `name` to any route. This has the following advantages: - No hardcoded URLs diff --git a/docs/guide/essentials/nested-routes.md b/docs/guide/essentials/nested-routes.md index 4f0e17e5..7e7b6eb3 100644 --- a/docs/guide/essentials/nested-routes.md +++ b/docs/guide/essentials/nested-routes.md @@ -1,5 +1,10 @@ # Nested Routes + + Some application's UIs are composed of components that are nested multiple levels deep. In this case, it is very common that the segments of a URL corresponds to a certain structure of nested components, for example: ``` diff --git a/docs/guide/essentials/passing-props.md b/docs/guide/essentials/passing-props.md index e1d9a584..62a56f60 100644 --- a/docs/guide/essentials/passing-props.md +++ b/docs/guide/essentials/passing-props.md @@ -1,5 +1,10 @@ # Passing Props to Route Components + + Using `$route` in your component creates a tight coupling with the route which limits the flexibility of the component as it can only be used on certain URLs. While this is not necessarily a bad thing, we can decouple this behavior with a `props` option: We can replace