From b44dd98ed2bb286c49125774c8202c9eb2db524d Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Fri, 16 Jun 2017 08:47:58 +0200 Subject: [PATCH 1/4] Remove unnecessary new line Signed-off-by: Bruno Lesieur --- docs/en/advanced/lazy-loading.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/en/advanced/lazy-loading.md b/docs/en/advanced/lazy-loading.md index 8b13ca4d6..a6465b094 100644 --- a/docs/en/advanced/lazy-loading.md +++ b/docs/en/advanced/lazy-loading.md @@ -2,8 +2,7 @@ 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 chunk, and only load them when the route is visited. -Combining Vue's [async component feature](http://vuejs.org/guide/components.html#Async-Components) and webpack's [code splitting feature](https://webpack.js.org/guides/code-splitting-async/), it's trivially easy to -lazy-load route components. +Combining Vue's [async component feature](http://vuejs.org/guide/components.html#Async-Components) and webpack's [code splitting feature](https://webpack.js.org/guides/code-splitting-async/), it's trivially easy to lazy-load route components. First, an async component can be defined as a factory function that returns a Promise (which should resolve to the component itself): From ca0d38a2be1892f321538a78caaf28238cabad5a Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Sat, 17 Jun 2017 17:10:42 +0200 Subject: [PATCH 2/4] Update dev From e2ac3a7e11c4b88089f8e9e58b0e46e947af0026 Mon Sep 17 00:00:00 2001 From: Bruno Lesieur Date: Thu, 13 Jul 2017 15:02:12 +0200 Subject: [PATCH 3/4] Use coerce word in replacement of cast. Differetiate usage of `props` to speak about `props` options and "props" to speak about the props concept. Signed-off-by: Bruno Lesieur --- docs/en/essentials/passing-props.md | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/docs/en/essentials/passing-props.md b/docs/en/essentials/passing-props.md index 4243c0cfe..439f66024 100644 --- a/docs/en/essentials/passing-props.md +++ b/docs/en/essentials/passing-props.md @@ -1,10 +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. +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. -To decouple this component from the router use props: +To decouple this component from the router use option `props`: -**❌ Coupled to $route** +**❌ Coupled to `$route`** ``` js const User = { @@ -17,7 +17,7 @@ const router = new VueRouter({ }) ``` -**👍 Decoupled with props** +**👍 Decoupled with `props`** ``` js const User = { @@ -28,7 +28,7 @@ const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true } - // for routes with named views, you have to define the props option for each named view: + // for routes with named views, you have to define the `props` option for each named view: { path: '/user/:id', components: { default: User, sidebar: Sidebar }, @@ -42,12 +42,11 @@ This allows you to use the component anywhere, which makes the component easier ### Boolean mode -When props is set to true, the route.params will be set as the component props. +When `props` is set to `true`, the `route.params` will be set as the component props. ### Object mode -When props is an object, this will be set as the component props as-is. -Useful for when the props are static. +When `props` is an object, this will be set as the component props as-is. Useful for when the props are static. ``` js const router = new VueRouter({ @@ -59,7 +58,7 @@ const router = new VueRouter({ ### Function mode -You can create a function that returns props. This allows you to cast the parameter to another type, combine static values with route-based values, etc. +You can create a function that returns props. This allows you to coerce the parameter to another type, combine static values with route-based values, etc. ``` js const router = new VueRouter({ @@ -69,8 +68,8 @@ const router = new VueRouter({ }) ``` -The url: `/search?q=vue` would pass `{query: "vue"}` as props to the SearchUser component. +The URL `/search?q=vue` would pass `{query: 'vue'}` as props to the `SearchUser` component. -Try to keep the props function stateless, as it's only evaluated on route changes. Use a wrapper component if you need state to define the props, that way vue can react to state changes. +Try to keep the `props` function stateless, as it's only evaluated on route changes. Use a wrapper component if you need state to define the props, that way vue can react to state changes. For advanced usage, checkout the [example](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js). From 51b1193791fcdb37ff112ac8fc065d505aaa1eab Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Thu, 13 Jul 2017 15:49:17 +0200 Subject: [PATCH 4/4] Update passing-props.md --- docs/en/essentials/passing-props.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/essentials/passing-props.md b/docs/en/essentials/passing-props.md index 439f66024..deb0caf1d 100644 --- a/docs/en/essentials/passing-props.md +++ b/docs/en/essentials/passing-props.md @@ -58,7 +58,7 @@ const router = new VueRouter({ ### Function mode -You can create a function that returns props. This allows you to coerce the parameter to another type, combine static values with route-based values, etc. +You can create a function that returns props. This allows you to cast parameters into other types, combine static values with route-based values, etc. ``` js const router = new VueRouter({