diff --git a/docs/ru/advanced/navigation-guards.md b/docs/ru/advanced/navigation-guards.md index 28bfc3820..dbe776eb8 100644 --- a/docs/ru/advanced/navigation-guards.md +++ b/docs/ru/advanced/navigation-guards.md @@ -91,8 +91,8 @@ const Foo = { beforeRouteUpdate (to, from, next) { // вызывается когда маршрут, что рендерит этот компонент изменился, // но этот компонент будет повторно использован в новом маршруте. - // Например, для маршрута с динамическими параметрами /foo/:id, когда мы - // перемещаемся между /foo/1 и /foo/2, экземпляр того же компонента Foo + // Например, для маршрута с динамическими параметрами `/foo/:id`, когда мы + // перемещаемся между `/foo/1` и `/foo/2`, экземпляр того же компонента `Foo` // будет использован повторно, и этот хук будет вызван когда это случится. // Также имеется доступ в `this` к экземпляру компонента. }, @@ -119,15 +119,15 @@ beforeRouteEnter (to, from, next) { ### Полная цепочка обработки навигации -1. Срабатывание навигации -2. Вызов leave-хуков в деактивируемых компонентах -3. Вызов глобальных `beforeEach` хуков -4. Вызов `beforeRouteUpdate` хука в переиспользуемых компонентах (2.2+) -5. Вызов `beforeEnter` в конфигурации маршрута -6. Разрешение асинхронных компонентов для маршрута -7. Вызов `beforeRouteEnter` в активируемых компонентах -8. Вызов глобальных `beforeResolve` хуков (2.5+) -9. Навигация подтверждена +1. Срабатывание навигации. +2. Вызов leave-хуков в деактивируемых компонентах. +3. Вызов глобальных `beforeEach` хуков. +4. Вызов `beforeRouteUpdate` хука в переиспользуемых компонентах (2.2+). +5. Вызов `beforeEnter` в конфигурации маршрута. +6. Разрешение асинхронных компонентов для маршрута. +7. Вызов `beforeRouteEnter` в активируемых компонентах. +8. Вызов глобальных `beforeResolve` хуков (2.5+). +9. Навигация подтверждена. 10. Вызов глобальных `afterEach` хуков. 11. Выполняется обновление DOM. 12. Вызов коллбэков, переданных в `next` в `beforeRouteEnter` хуке с созданными экземплярами. diff --git a/docs/ru/essentials/history-mode.md b/docs/ru/essentials/history-mode.md index 276b6ff1b..fcfd63616 100644 --- a/docs/ru/essentials/history-mode.md +++ b/docs/ru/essentials/history-mode.md @@ -40,12 +40,37 @@ location / { } ``` -#### Node.js (Express) +#### Node.js + +```js +const http = require("http") +const fs = require("fs") +const httpPort = 80 + +http.createServer((req, res) => { + fs.readFile("index.htm", "utf-8", (err, content) => { + if (err) { + console.log('Невозможно открыть файл "index.htm".') + } + + res.writeHead(200, { + "Content-Type": "text/html; charset=utf-8" + }) + + res.end(content) + }) +}).listen(httpPort, () => { + console.log("Сервер запущен на: http://localhost:%s", httpPort) +}) +``` + +#### Node.js c использованием Express При использовании Node.js/Express, мы рекомендуем пользоваться [connect-history-api-fallback middleware](https://github.com/bripkens/connect-history-api-fallback). #### Internet Information Services (IIS) -``` + +```xml @@ -72,6 +97,15 @@ location / { ``` +#### Caddy + +``` +rewrite { + regexp .* + to {path} / +} +``` + ## Предостережение При таком подходе возникает одно неприятное последствие: сервер больше не будет выдавать ошибки 404, так как обслуживание всех путей отдаётся на откуп клиентскому роутингу. Частично эту проблему можно решить, указав путь по умолчанию во Vue-router: @@ -85,4 +119,4 @@ const router = new VueRouter({ }) ``` -Если же вы используете на сервере Node.js, уже на стороне сервера можно задействовать конфигурацию роутера и решить таким образом проблему целиком. +Если же вы используете на сервере Node.js, уже на стороне сервера можно задействовать конфигурацию роутера и решить таким образом проблему целиком. Ознакомьтесь с [руководством по серверному рендерингу Vue.js](https://ssr.vuejs.org/ru/) для получения дополнительной информации. diff --git a/docs/ru/essentials/passing-props.md b/docs/ru/essentials/passing-props.md index 81f67e4de..3a5e8c334 100644 --- a/docs/ru/essentials/passing-props.md +++ b/docs/ru/essentials/passing-props.md @@ -4,7 +4,7 @@ Для разделения компонента от маршрутизатора можно использовать входные данные: -**❌ Жёсткая связь с $route** +**❌ Жёсткая связь с `$route`** ``` js const User = { @@ -28,7 +28,7 @@ const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true } - // для маршрутов с именованными представлениями, необходимо указывать опцию props для каждого именованного представления: + // для маршрутов с именованными представлениями, необходимо указывать опцию `props` для каждого именованного представления: { path: '/user/:id', components: { default: User, sidebar: Sidebar }, @@ -46,8 +46,7 @@ const router = new VueRouter({ ### Объект -Когда `props` объект, они будут установлены входными параметрами компонента как есть. -Полезно когда входные параметры являются статическими данными. +Когда `props` объект, они будут установлены входными параметрами компонента как есть. Полезно когда входные параметры являются статическими данными. ``` js const router = new VueRouter({ @@ -59,8 +58,7 @@ const router = new VueRouter({ ### Функция -Вы можете создать функцию, которая вернёт объект с входными параметрами. -Это позволяет вам приводить параметры к другому типу, комбинировать статические значения с значениями из маршрута, и т.д. +Вы можете создать функцию, которая вернёт объект с входными параметрами. Это позволяет вам приводить параметры к другим типам, комбинировать статические значения с значениями из маршрута, и т.д. ``` js const router = new VueRouter({ @@ -70,9 +68,8 @@ const router = new VueRouter({ }) ``` -Ссылка: `/search?q=vue` также передаст `{query: "vue"}` в качестве входных параметров в компонент SearchUser. +Ссылка: `/search?q=vue` также передаст `{query: 'vue'}` в качестве входных параметров в компонент `SearchUser`. -Старайтесь держать функции генерации входных параметров независимыми от состояния, потому что они вызываются только при изменениях маршрута. -Используйте компонент обёртку, если вам нужно состояние для определения входных параметров, в таком случае Vue сможет реагировать на изменения состояния. +Старайтесь держать функции генерации входных параметров независимыми от состояния, потому что они вызываются только при изменениях маршрута. Используйте компонент обёртку, если вам нужно состояние для определения входных параметров, в таком случае Vue сможет реагировать на изменения состояния. Для более продвинутого использования, смотрите [пример](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js).