Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions docs/en/essentials/history-mode.md
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@ When using history mode, the URL will look "normal," e.g. `http://oursite.com/us

Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access `http://oursite.com/user/id` directly in their browser. Now that's ugly.

Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same `index.html` page that your app lives in. Beautiful, again!
Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same `index.html` page that your app lives in. Beautiful, again!

## Example Server Configurations

@@ -45,6 +45,7 @@ location / {
For Node.js/Express, consider using [connect-history-api-fallback middleware](https://github.com/bripkens/connect-history-api-fallback).

#### Internet Information Services (IIS)

```xml
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
@@ -61,10 +62,10 @@ For Node.js/Express, consider using [connect-history-api-fallback middleware](ht
</rule>
</rules>
</rewrite>
<httpErrors>
<remove statusCode="404" subStatusCode="-1" />
<httpErrors>
<remove statusCode="404" subStatusCode="-1" />
<remove statusCode="500" subStatusCode="-1" />
<error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" />
<error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" />
<error statusCode="500" path="/survey/error" responseMode="ExecuteURL" />
</httpErrors>
<modules runAllManagedModulesForAllRequests="true"/>
@@ -73,6 +74,7 @@ For Node.js/Express, consider using [connect-history-api-fallback middleware](ht
```

#### Caddy

```
rewrite {
regexp .*
3 changes: 1 addition & 2 deletions docs/en/essentials/nested-routes.md
Original file line number Diff line number Diff line change
@@ -48,8 +48,7 @@ const User = {
}
```

To render components into this nested outlet, we need to use the `children`
option in `VueRouter` constructor config:
To render components into this nested outlet, we need to use the `children` option in `VueRouter` constructor config:

``` js
const router = new VueRouter({
11 changes: 4 additions & 7 deletions docs/en/essentials/passing-props.md
Original file line number Diff line number Diff line change
@@ -27,10 +27,10 @@ const User = {
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:
{
path: '/user/:id',
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
@@ -59,8 +59,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 cast the parameter to another type, combine static values with route-based values, etc.

``` js
const router = new VueRouter({
@@ -72,8 +71,6 @@ const router = new VueRouter({

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).