--- /dev/null
+<template>
+ <div class="vueschool">
+ <a
+ :href="`${href}?friend=vuerouter`"
+ target="_blank"
+ rel="sponsored noopener"
+ :title="title"
+ >
+ <slot>Watch a free video lesson on Vue School</slot>
+ </a>
+ </div>
+</template>
+<script>
+export default {
+ props: {
+ href: { type: String, required: true },
+ title: { type: String, required: true }
+ },
+}
+</script>
+<style scoped>
+.vueschool {
+ margin-top: 20px;
+ background-color: #e7ecf3;
+ padding: 1em 1.25em;
+ border-radius: 2px;
+ color: #486491;
+ position: relative;
+ display: flex;
+}
+.vueschool a {
+ color: #486491 !important;
+ position: relative;
+ padding-left: 36px;
+}
+.vueschool a:before {
+ content: '';
+ position: absolute;
+ display: block;
+ width: 30px;
+ height: 30px;
+ top: calc(50% - 15px);
+ left: -4px;
+ border-radius: 50%;
+ background-color: #73abfe;
+}
+.vueschool a:after {
+ content: '';
+ position: absolute;
+ display: block;
+ width: 0;
+ height: 0;
+ top: calc(50% - 5px);
+ left: 8px;
+ border-top: 5px solid transparent;
+ border-bottom: 5px solid transparent;
+ border-left: 8px solid #fff;
+}
+</style>
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.
# Lazy Loading Routes
+<VueSchoolLink
+ href="https://vueschool.io/lessons/lazy-loading-routes-vue-cli-only"
+ title="Learn about 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:
# Transitions
+<VueSchoolLink
+ href="https://vueschool.io/lessons/route-transitions"
+ title="Learn about route 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
# Dynamic Route Matching with Params
+<VueSchoolLink
+ href="https://vueschool.io/lessons/dynamic-routes"
+ title="Learn about 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
## Reacting to Params Changes
+<VueSchoolLink
+ href="https://vueschool.io/lessons/reacting-to-param-changes"
+ title="Learn how to react to param 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`:
## Catch all / 404 Not found Route
+<VueSchoolLink
+ href="https://vueschool.io/lessons/404-not-found-page"
+ title="Learn how to make a 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
# Different History modes
+<VueSchoolLink
+ href="https://vueschool.io/lessons/history-mode"
+ title="Learn about the differences between Hash Mode and HTML5 Mode"
+/>
+
The `history` option when creating the router instance allows us to choose among different history modes.
## Hash Mode
# Named Routes
+<VueSchoolLink
+ href="https://vueschool.io/lessons/named-routes"
+ title="Learn about the named routes"
+/>
+
Alongside the `path`, you can provide a `name` to any route. This has the following advantages:
- No hardcoded URLs
# Nested Routes
+<VueSchoolLink
+ href="https://vueschool.io/lessons/nested-routes"
+ title="Learn about 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:
```
# Passing Props to Route Components
+<VueSchoolLink
+ href="https://vueschool.io/lessons/route-props"
+ title="Learn how to pass 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
projects / thirdparty / vuejs / router.git / commitdiff
